Card
Flexible container for content grouping
Class Reference Basic

Shoes!
If a dog chews shoes whose shoes does he choose?
Div(
Figure(
Img(src='...', alt='Shoes')
),
Div(
H2('Shoes!', cls='card-title'),
P('If a dog chews shoes whose shoes does he choose?'),
Div(
Button('Buy Now', cls='btn btn-primary'),
cls='card-actions justify-end'
),
cls='card-body'
),
cls='card bg-base-100 w-96 shadow-xl'
)
Auto-import documentation coming soon...
Card title!
If a dog chews shoes whose shoes does he choose?
Div(
Div(
H2('Card title!', cls='card-title'),
P('If a dog chews shoes whose shoes does he choose?'),
Div(
Button('Buy Now', cls='btn btn-primary'),
cls='card-actions justify-end'
),
cls='card-body'
),
cls='card bg-base-100 w-96 shadow-xl'
)
Auto-import documentation coming soon...

Shoes! NEW
If a dog chews shoes whose shoes does he choose?
Fashion
Products
Div(
Figure(
Img(src='...', alt='Shoes')
),
Div(
H2(
'Shoes!',
Div('NEW', cls='badge badge-secondary'),
cls='card-title'
),
P('If a dog chews shoes whose shoes does he choose?'),
Div(
Div('Fashion', cls='badge badge-outline'),
Div('Products', cls='badge badge-outline'),
cls='card-actions justify-end'
),
cls='card-body'
),
cls='card bg-base-100 w-96 shadow-xl'
)
Auto-import documentation coming soon...
Image Layouts
Shoes!
If a dog chews shoes whose shoes does he choose?

Div(
Div(
H2('Shoes!', cls='card-title'),
P('If a dog chews shoes whose shoes does he choose?'),
cls='card-body'
),
Figure(
Img(src='...', alt='Shoes')
),
cls='card bg-base-100 w-96 shadow-xl'
)
Auto-import documentation coming soon...

New movie!
Click to watch on Jetflix
Div(
Figure(
Img(src='...', alt='Movie')
),
Div(
H2('New movie is released!', cls='card-title'),
P('Click the button to watch on Jetflix app.'),
Div(
Button('Watch', cls='btn btn-primary'),
cls='card-actions justify-end'
),
cls='card-body'
),
cls='card card-side bg-base-100 shadow-xl'
)
Auto-import documentation coming soon...

Shoes!
If a dog chews shoes whose shoes does he choose?
Div(
Figure(
Img(src='...', alt='Shoes')
),
Div(
H2('Shoes!', cls='card-title'),
P('If a dog chews shoes whose shoes does he choose?'),
Div(
Button('Buy Now', cls='btn btn-primary'),
cls='card-actions justify-end'
),
cls='card-body'
),
cls='card bg-base-100 image-full w-96 shadow-xl'
)
Auto-import documentation coming soon...
Content Layouts

Shoes!
If a dog chews shoes whose shoes does he choose?
Div(
Figure(
Img(src='...', alt='Shoes', cls='rounded-xl'),
cls='px-10 pt-10'
),
Div(
H2('Shoes!', cls='card-title'),
P('If a dog chews shoes whose shoes does he choose?'),
Div(
Button('Buy Now', cls='btn btn-primary'),
cls='card-actions'
),
cls='card-body items-center text-center'
),
cls='card bg-base-100 w-96 shadow-xl'
)
Auto-import documentation coming soon...

Shoes!
If a dog chews shoes whose shoes does he choose?
Div(
Figure(
Img(src='...', alt='Shoes')
),
Div(
H2('Shoes!', cls='card-title'),
P('If a dog chews shoes whose shoes does he choose?'),
Div(
Button('Buy Now', cls='btn btn-primary'),
cls='card-actions justify-end'
),
cls='card-body'
),
cls='card card-compact bg-base-100 w-96 shadow-xl'
)
Auto-import documentation coming soon...
We are using cookies for no reason.
Div(
Div(
Div(
Button(
Icon.x(),
cls='btn btn-square btn-sm'
),
cls='card-actions justify-end'
),
P('We are using cookies for no reason.'),
cls='card-body'
),
cls='card bg-base-100 w-96 shadow-xl'
)
Auto-import documentation coming soon...

New album is released!
Click the button to listen on Spotiwhy app.
Div(
Figure(
Img(src='...', alt='Album')
),
Div(
H2('New album is released!', cls='card-title'),
P('Click the button to listen on Spotiwhy app.'),
Div(
Button('Listen', cls='btn btn-primary'),
cls='card-actions justify-end'
),
cls='card-body'
),
cls='card lg:card-side bg-base-100 shadow-xl'
)
Auto-import documentation coming soon...
Style Variants

Life hack
How to park your car at your garage?
Div(
Figure(
Img(src='...', alt='car!')
),
Div(
H2('Life hack', cls='card-title'),
P('How to park your car at your garage?'),
Div(
Button('Learn now!', cls='btn btn-primary'),
cls='card-actions justify-end'
),
cls='card-body'
),
cls='card glass w-96'
)
Auto-import documentation coming soon...
Card title!
If a dog chews shoes whose shoes does he choose?
Div(
Div(
H2('Card title!', cls='card-title'),
P('If a dog chews shoes whose shoes does he choose?'),
Div(
Button('Buy Now', cls='btn'),
cls='card-actions justify-end'
),
cls='card-body'
),
cls='card bg-primary text-primary-content w-96'
)
Auto-import documentation coming soon...
Cookies!
We are using cookies for no reason.
Div(
Div(
H2('Cookies!', cls='card-title'),
P('We are using cookies for no reason.'),
Div(
Button('Accept', cls='btn btn-primary'),
Button('Deny', cls='btn btn-ghost'),
cls='card-actions justify-end'
),
cls='card-body items-center text-center'
),
cls='card bg-neutral text-neutral-content w-96'
)
Auto-import documentation coming soon...
Class Reference
Class | Type | Description |
---|---|---|
card | Component | Base card |
card-title | Part | Card title |
card-body | Part | Card body |
card-actions | Part | Actions part |
card-border | Style | Adds border to <card> |
card-dash | Style | dash style |
card-side | Modifier | Horizontal layout |
image-full | Modifier | Full-bleed image |
card-xs | Size | Extra small size |
card-sm | Size | Small size |
card-md | Size | Medium size (default) |
card-lg | Size | Large size |
card-xl | Size | Extra large size |
Do you have a question? ask the community
Do you see a bug? open an issue on GitHub
LLMs Context: Full Markdown | This Component