Cards
Cards are flexible containers that group related information and actions. They are the primary building block for lists, grids, and dashboards.
Anatomy
Section titled “Anatomy”A card consists of:
- Container — rounded rectangle with border or shadow
- Media area (optional) — image, illustration, or icon at top
- Content area — title, description, metadata
- Actions (optional) — buttons or links at bottom
Variants
Section titled “Variants”| Type | Shadow | Border |
|---|---|---|
| Default | shadow-sm | 1px (gray-200) |
| Elevated | shadow-md | None |
| Flat | None | 1px (gray-200) |
| Interactive | shadow-sm → md | Hover lifts & border changes |
Spacing
Section titled “Spacing”| Element | Padding |
|---|---|
| Card padding | --space-4 (16px) or --space-5 (20px) |
| Content gap | --space-3 (12px) |
| Actions margin-top | --space-4 (16px) |
Guidelines
Section titled “Guidelines”- Cards should contain one idea or one logical group of content
- Keep the card’s content hierarchy shallow: title → description → action
- Use consistent padding within a set of cards
- Interactive cards should have a clear hover state
- Avoid nesting cards inside cards