The single typographic primitive. Nine variants cover every reasonable text role — if you feel tempted to add a tenth, pick the closest one and adjust line-height instead.
Display — editorial hero
variant="display" The quick brown boule rolls over the jack.
H1 — page title
variant="h1" The quick brown boule rolls over the jack.
H2 — section
variant="h2" The quick brown boule rolls over the jack.
H3 — sub-section
variant="h3" The quick brown boule rolls over the jack.
Lead — opening paragraph
variant="lead" The quick brown boule rolls over the jack.
Body — default paragraph
variant="body" The quick brown boule rolls over the jack.
Body small — caption / metadata
variant="body-sm" The quick brown boule rolls over the jack.
Overline — section label
variant="overline" The quick brown boule rolls over the jack.
Code — inline monospace
variant="code" The quick brown boule rolls over the jack.
Usage
tsx · view.tsx
import { Text } from '@petanque-life/shared';
<Text variant="h1">Section title</Text>
<Text variant="body">Matched text rolls here.</Text>
<Text variant="overline" tone="muted">Tournament · 2026 season</Text>API
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "display" | "h1" | "h2" | "h3" | "lead" | "body" | "body-sm" | "overline" | "code" | "body" | Typographic role — drives size, weight, tracking, leading. |
| tone | "default" | "muted" | "subtle" | "inverse" | "brand" | "default" | Foreground colour token. |
| as | keyof JSX.IntrinsicElements | "p" / "h1" / … | Override the rendered tag. Defaults follow variant (h1 → <h1>). |
| align | "start" | "center" | "end" | "start" | Text alignment. |
| truncate | boolean | false | Truncate overflow with ellipsis. |