Skip to main content
Cards group related content into a bordered, shadowed container. They’re composed from sub-components — CardHeader, CardContent, and CardFooter — that handle spacing and layout so you can focus on content.

​
Basic Usage

​
Structure

Cards follow a header → content → footer pattern. Each section is optional — use only what you need. CardHeader is a grid that pairs a CardTitle with an optional CardDescription. CardContent provides horizontal padding for your main content. CardFooter renders as a flex row, naturally aligning action buttons side by side.

​
Simple Cards

For lightweight use cases, you can skip the sub-components entirely and use css_class to add padding:

​
Card Grid

Cards work naturally with Grid for dashboard-style layouts:

​
API Reference

Card Parameters

​
str | None
default:"None"
Additional Tailwind CSS classes. The card renders as a div with border, shadow, and rounded corners.

CardHeader Parameters

​
str | None
default:"None"
Additional Tailwind CSS classes. Renders as a grid with automatic spacing for title and description.

CardTitle Parameters

​
str | None
default:"None"
Title text. Can be passed as a positional argument. Alternatively, use child components instead of a string.
​
str | None
default:"None"
Additional Tailwind CSS classes.

CardDescription Parameters

​
str | None
default:"None"
Description text. Can be passed as a positional argument. Alternatively, use child components.
​
str | None
default:"None"
Additional Tailwind CSS classes.

CardContent Parameters

​
str | None
default:"None"
Additional Tailwind CSS classes. Provides horizontal padding (px-4) for the main body area.

CardFooter Parameters

​
str | None
default:"None"
Additional Tailwind CSS classes. Renders as a flex row for action buttons.

​
Protocol Reference

Card
CardHeader
CardTitle
CardDescription
CardContent
CardFooter
For the complete protocol schema, see Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter.