Card
A versatile container component with header and content areas
The card groups related content on a single surface with optional header, body, and footer regions. Use it for dashboard tiles, list rows, article previews, or any self-contained block that needs its own elevation.
Preview
This is a simple card component with a header and content section.
Installation
Usage
Composition
Examples
With Footer and Action
Use CardFooter for actions below the content and CardAction to place a control in the header.
Discuss Q4 roadmap and project priorities with the team.
Variants
Use variant to change how the card is framed.
This is the default card variant with minimal styling.
This is the inset variant with an outer and inner border design.
| Value | Description |
|---|---|
default | A single elevated surface, the standard card. |
inset | A gray-framed outer with a lifted inner card. |
API Reference
The Card is a custom component that does not extend Base UI.
Props
Card
Container component for grouping related content with optional header, body, and footer sections.