Container component for grouping related content.
| Name | Type | Default | Description |
|---|---|---|---|
| className | string | — | Additional CSS classes |
| Property | Token | CSS Variable | Description | |
|---|---|---|---|---|
| Background | color.card | var(--card) | Card surface color | |
| Text | color.card-foreground | var(--card-foreground) | Card text color | |
| Border | color.border | var(--border) | Subtle border | |
| Border Radius | borderRadius.lg | var(--radius) | Large corner rounding | |
| Shadow | shadow.sm | var(--shadow-sm) | Subtle elevation |
Three shadow variants for different hierarchy levels.
Subtle shadow for standard content
Default variant with subtle shadow.
Prominent shadow with hover effect
Hover to see elevation increase.
Border instead of shadow
2px border for nested content.
<Card variant="default">
<CardHeader>
<CardTitle>Default</CardTitle>
<CardDescription>Subtle shadow</CardDescription>
</CardHeader>
<CardContent>Content here</CardContent>
</Card>
<Card variant="elevated">...</Card>
<Card variant="outlined">...</Card>Cards with action buttons in the footer.
Action buttons go in the footer
The footer provides a consistent location for actions.
<Card>
<CardHeader>
<CardTitle>Card Title</CardTitle>
<CardDescription>Card description</CardDescription>
</CardHeader>
<CardContent>
<p>Card content</p>
</CardContent>
<CardFooter>
<Button>Action</Button>
</CardFooter>
</Card>Minimal card without header or footer.
<Card>
<CardContent>
<p>Simple content-only card</p>
</CardContent>
</Card>