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

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

CardHeader Parameters

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

CardTitle Parameters

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

CardDescription Parameters

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

CardContent Parameters

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

CardFooter Parameters

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

​
Protocol Reference

Card
{
  "type": "Card",
  "children?": "[Component]",
  "cssClass?": "string"
}
CardHeader
{
  "type": "CardHeader",
  "children?": "[Component]",
  "cssClass?": "string"
}
CardTitle
{
  "type": "CardTitle",
  "children?": "[Component]",
  "content?": "string",
  "cssClass?": "string"
}
CardDescription
{
  "type": "CardDescription",
  "children?": "[Component]",
  "content?": "string",
  "cssClass?": "string"
}
CardContent
{
  "type": "CardContent",
  "children?": "[Component]",
  "cssClass?": "string"
}
CardFooter
{
  "type": "CardFooter",
  "children?": "[Component]",
  "cssClass?": "string"
}
For the complete protocol schema, see Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter.