#540
Display role
Three Heading samples: a fluid display headline, a smaller display-3 heading and an h2 element drawn at the h4 size.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Display role" pattern (@codeatlasdev/ui demo #540, display/heading) in my app.
Call get_demo({ ids: ["#540"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Rendering an editorial or marketing headline in the display font with its own tracking and leading, or decoupling a heading's look from its level.
Keep these library parts, with the props and tokens the demo uses:
- Heading from "@codeatlasdev/ui"
Behaviour to keep:
- `<Heading level={1} size="display">` renders an h1 in the display text role
- `<Heading level={2} size="display-3">` renders an h2 at the smallest fluid display size
- `<Heading level={2} size="h4">` renders an h2 with the h4 look
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
- Heading
@codeatlasdev/ui
How it is built
- `<Heading level={1} size="display">` renders an h1 in the display text role
- `<Heading level={2} size="display-3">` renders an h2 at the smallest fluid display size
- `<Heading level={2} size="h4">` renders an h2 with the h4 look
Related
Loading source.