#861
Type roles
The six type roles (title, heading, body, label, caption, num) rendered with Text, one row each.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Type roles" pattern (@codeatlasdev/ui demo #861, foundation/typography) in my app.
Call get_demo({ ids: ["#861"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Picking the text role of a line of UI: use the role instead of loose font-size, line-height and letter-spacing, so a theme `type` override restyles it.
Keep these library parts, with the props and tokens the demo uses:
- Text from "@codeatlasdev/ui"
Behaviour to keep:
- `import { Text } from '@codeatlasdev/ui'`
- One `<Text role={r.role}>` per role: `title`, `heading`, `body`, `label`, `caption` and `num`
- The `num` sample is `1,284 leads, 18:42`, drawn with tabular digits
- Rows are a `grid-template-columns: var(--ca-space-20) 1fr` with `gap: var(--ca-space-3)`
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
- Text
@codeatlasdev/ui
How it is built
- `import { Text } from '@codeatlasdev/ui'`
- One `<Text role={r.role}>` per role: `title`, `heading`, `body`, `label`, `caption` and `num`
- The `num` sample is `1,284 leads, 18:42`, drawn with tabular digits
- Rows are a `grid-template-columns: var(--ca-space-20) 1fr` with `gap: var(--ca-space-3)`
Related
Loading source.