Typography
Consistent text styles for headings, body copy, and captions — renders the correct semantic HTML tag automatically.
The quick brown fox jumps over the lazy dog
API
All inputs and configuration options for zyra-typography.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body-lg' | 'body' | 'body-sm' | 'caption' | 'overline' | 'body' | Type scale step and default semantic tag |
as | string | '' | Override the rendered HTML tag while keeping the variant styling |
weight | 'regular' | 'medium' | 'semibold' | 'bold' | '' | '' | Override the variant's default font weight |
align | 'left' | 'center' | 'right' | 'left' | Text alignment |
muted | boolean | false | Uses the muted foreground color token |
truncate | boolean | false | Single-line ellipsis overflow |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Headings render as real h1-h6 elements — do not skip levels in a page outline
- Use `as` to restyle a heading visually without breaking the document outline