Components
Cards
The soft gradient surface everything sits on: 26px corners, a white top edge and a long, low shadow. Clickable cards deepen their shadow on hover — they never move.
Figure card
The KPI recipe: title top-left, figure at the bottom with a small currency sign, change badge beside it.
Total income
€384,567.45+9.4%
vs 2025 Total expense
€241,230.10+5.4%
vs 2025 Net period
€143,337.35+16.8%
vs 2025Clickable card
The whole card is the link. Hover it: the shadow deepens, nothing moves.
Padding and flat cards
sm for dense lists; flat for a card inside a card (no second shadow).
Small padding16 × 18px
Card holding a flat card
Flat inside — no second shadow
Props
| Prop | Values | Default | What it does |
|---|---|---|---|
pad | 'md' | 'sm' | 'none' | 'md' | 24×26 · 16×18 · 0 (20px on phones) |
href | string | — | Makes the whole card a link with the hover shadow |
tone | 'plain' | 'flat' | 'plain' | Gradient card, or a flat card for nesting |
tag | string | 'div' | HTML element (section, article…) |
head | snippet | — | Optional header row (title + action) |