Card
Cards are used to group and display content in a way that is easily readable.
| Class name | Type | |
|---|---|---|
| card | Component | Container element |
| card-title | Component | Title of card |
| card-body | Component | Container for content |
| card-actions | Component | Container for buttons |
| card-bordered | Modifier | Adds border to <card> |
| image-full | Modifier | The image in <figure> element will be the background |
| card-normal | Responsive | Applies default paddings |
| card-compact | Responsive | Applies smaller padding |
| card-side | Responsive | The image in <figure> will be on to the side |
# Card
Shoes!
If a dog chews shoes whose shoes does he choose?
# Compact card (less padding for `card-body`)
Shoes!
If a dog chews shoes whose shoes does he choose?
# Card with badge
Shoes! NEW
If a dog chews shoes whose shoes does he choose?
Fashion
Products
# Card with bottom image
Shoes!
If a dog chews shoes whose shoes does he choose?
# Card with centered content and paddings
Shoes!
If a dog chews shoes whose shoes does he choose?
# Card with image overlay
Shoes!
If a dog chews shoes whose shoes does he choose?
# Card with no image
Card title!
If a dog chews shoes whose shoes does he choose?
# Card with custom color
Card title!
If a dog chews shoes whose shoes does he choose?
# Centered card with neutral color
Cookies!
We are using cookies for no reason.
# Card with action on top
We are using cookies for no reason.
# Card glass
Life hack
How to park your car at your garage?
# Card with image on side
New movie is released!
Click the button to watch on Jetflix app.
# Responsive card (vertical on small screen, horizontal on large screen)
New album is released!
Click the button to listen on Spotiwhy app.
Do you have a question? ask the community
Do you see a bug? open an issue on GitHub
Do you like daisyUI? tweet about it!
Support daisyUI's development: Open Collective
