Badges
A row of small labels: the client in its brand colour, the discipline in black.
Happeo Product Design
<Badges items={[
{ label: 'Happeo', color: 'var(--color-accent-happeo)' },
{ label: 'Product Design', color: 'var(--color-bg-inverse)' },
]} /> 01–06/2025 Happeo 6 min read
Usage
- Colour: the client badge takes the client's accent (
--color-accent-<brand>); the discipline or date is black (--color-bg-inverse, cream text). Without a colour a badge is black. - Direction: a row that wraps; a parent can set
--badges-direction: column(the article header does from 1024) or widen the gap with--badges-gap(Core skills).
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | { label: string; color?: string }[] | — | Labels; color is any CSS colour, usually a token. |
size | 'sm' | 'lg' | 'sm' | sm on cards, lg in the article header and Core skills. |
Tokens
| Token | Base | ≥ 390 | ≥ 1024 | Note |
|---|---|---|---|---|
--spacing-badge-x | var(--spacing-sm) | |||
--spacing-badge-y | 2px | |||
--radius-badge | 4px | |||
--radius-tag | 6px | |||
--type-badge-size | 12px | 14px | 16px | |
--type-badge-lg-size | 16px | 22px | article header badges |