Heading
A real h1 through h6 with independently selectable heading typography.@gemologic/sheen · typographyPlayground
Workspace settings
<Heading level={2} size="h3">Workspace settings</Heading>Variant matrix
Heading example
Workspace settings
level: 1
Workspace settings
level: 2
Workspace settings
level: 3
Workspace settings
level: 4
Workspace settings
level: 5
Workspace settings
level: 6
Workspace settings
size: h1
Workspace settings
size: h2
Workspace settings
size: h3
Workspace settings
size: h4
Workspace settings
Anatomy
- Package
@gemologic/sheen- Source
packages/ui/src/primitives/Typography.tsx- Tokens
--sheen-font-sans--sheen-font-mono--sheen-color-fg--sheen-color-fg-muted
Accessibility
Role: headingKeyboard: No component-owned keysDo
- Keep the document heading outline meaningful.
Do not
- Do not use low-contrast subtle tokens for meaningful text.
Generated props
| Name | Type | Default | Description |
|---|---|---|---|
level * | 1 | 2 | 3 | 4 | 5 | 6 | — | Document outline level; choose semantically rather than for visual size. |
size | "h1" | "h2" | "h3" | "h4" | — | Optional visual type role, independent of the document outline level. |