Card
A flexible card component with headers, actions, and content slots.
Preview
Small Card
This card uses the small size variant.
The card component supports a size prop that can be set to "sm" for a more compact appearance.
Usage
Examples
Each section shows a single card pattern.
Basic
A minimal card with title, description, and body content.
Basic Card
Simple card with title and description
This is a minimal card component with essential elements.
Small
Compact spacing using size="sm" and a full-width action button.
Small Card
Compact variant
Uses the small size variant for tighter spacing.
Header Action
Use CardAction to place controls alongside the header content.
Weekly Report
Performance highlights
Media
Add a media block above the header for richer cards.
Design Sprint
Workshop toolkit
Ready-to-run agenda with templates and exercises for alignment.
API Reference
The Card components render semantic elements with div, h3, and p tags.
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "md" | "lg" | "md" | Controls card spacing and typography. |
className | string | undefined | Add custom classes to any card slot. |
children | ReactNode | undefined | Content of the slot component. |
aria-label | string | undefined | Accessible label for actions when needed. |