Card

Flexible content container. Supports images, actions, layouts, and style variants via DaisyUI's card classes.

Basic

Title + body text + actions in the default slot.

Default card

Card Title

If a dog chews shoes, whose shoes does he choose?

Style variants

default (shadow), bordered, dash, glass.

All style variants

default

Style: default

bordered

Style: bordered

dash

Style: dash

glass

Style: glass

Compact

size="compact" reduces padding for denser layouts.

Normal vs compact

Normal padding

Default card-body padding.

Compact padding

Reduced padding for dense UIs.

Card with image

Pass imageSrc to render a <figure> above the body.

Image top (default vertical layout)

Shoes!

If a dog chews shoes, whose shoes does he choose?

Side layout

layout="side" places the image to the left of the body.

card-side

New movie is released!

Click the button to watch on Jetflix app.

Image overlay

imageOverlay adds image-full — text renders over the image.

image-full

Mountains!

What a beautiful view of the mountains.

Colored backgrounds

Use bg and textColor props (or Tailwind classes) to tint cards.

Semantic color backgrounds

Primary

bg-primary

Secondary

bg-secondary

Accent

bg-accent

Neutral

bg-neutral

Info

bg-info

Success

bg-success

Warning

bg-warning

Error

bg-error

Title with badge

Slot a Badge next to the title using the title prop and a custom heading in the default slot.

Title + badge combo

Wireless Headphones New

Premium sound quality with active noise cancellation.

$299

Smart Watch Sale

Track your fitness goals with style.

$199 $249

Action alignment

justify-end, justify-center, justify-between on the card-actions wrapper.

Action positions

Left

Default alignment.

Center

Centered actions.

Right

Right-aligned actions.

Card grid

Responsive grid of cards — common product / article layout.

3-column grid

Analytics

Track your key metrics in real time.

Security

Keep your account safe with 2FA.

Integrations

Connect with your favourite tools.