Card Variants
default
The default card variant.
outlined
The outlined card variant.
elevated
The elevated card variant.
interactive
The interactive card variant.
Composition Example
Interactive cards composed with Badge for status indicators.
Project Alpha
ActiveUpdated 2 days ago
Project Beta
PausedUpdated 1 week ago
Project Gamma
ArchivedUpdated 3 weeks ago
Card Props
| Prop | Type | Description |
|---|---|---|
| variant | "default" | "outlined" | "elevated" | "interactive" | Visual treatment. Interactive adds hover/active animation. |
| asChild | boolean | Render as child element (e.g. Link) via Radix Slot |
| className | string | Additional classes on the root element |
Sub-components: Card.Header, Card.Body, Card.Footer each accept className and standard div props.
Usage
<Card variant="interactive">
<Card.Header>
<h3 className="font-head">Title</h3>
<Badge variant="success" size="sm">Active</Badge>
</Card.Header>
<Card.Body>
<p>Supporting detail here</p>
</Card.Body>
<Card.Footer>
<Button size="sm">View</Button>
</Card.Footer>
</Card>