#231
Heading scale
Six heading size tokens, Heading 1 to Heading 6, each rendered as a bold sample line.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Heading scale" pattern (@codeatlasdev/ui demo #231, foundation/typography) in my app.
Call get_demo({ ids: ["#231"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Choosing a heading size token for a page title hierarchy.
Keep these library parts, with the props and tokens the demo uses:
Behaviour to keep:
- `[1, 2, 3, 4, 5, 6].map((n) =>` builds 6 rows
- Each row has label `Heading ${n}` and token `--ca-font-size-h${n}`
- Renders `<TypeRows {rows} heading />` with the `heading` flag for bold samples
Reduced motion: the demo handles it; keep that branch.
Keyboard: not an interactive control.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
How it is built
- `[1, 2, 3, 4, 5, 6].map((n) =>` builds 6 rows
- Each row has label `Heading ${n}` and token `--ca-font-size-h${n}`
- Renders `<TypeRows {rows} heading />` with the `heading` flag for bold samples
Related
Loading source.