Components / Layout
Card
stableThe base surface for grouping related content — every stat card, product card, and settings panel is built on this.
Padding
Small
Medium
Large
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
padding | 'sm' | 'md' | 'lg' | 'md' | No | Inner spacing. |
children | ReactNode | — | Yes | Card content. |
...props | HTMLAttributes<HTMLDivElement> | — | No | Any standard div prop (onClick, className, etc). |
Do
- Use the tinted page background around cards to create depth — never a border-only card on a pure white page.
- Keep one clear purpose per card.
Don't
- Nest a card inside another card — flatten the hierarchy or use a Divider instead.
- Add a drop shadow beyond --shadow-1 for a resting card — reserve heavier shadows for elevated/interactive states.