Title
Heading primitive. order picks the <h*> element; size decouples the visual scale, so document outline and design layout stay independent.
Title renders any of <h1>..<h6> based on the order prop. The visual scale is owned by a separate size prop with a sensible per-order default — so demoting or promoting a heading visually never breaks the document outline.
import { Title } from '@42/ui-react/title';
<Title order={1}>Page heading</Title>
<Title order={3} size="xl">Visually smaller h3</Title>
<Title order={2} size="4xl">h2 promoted to display scale</Title>Playground
Component
Presets
Build for 42.
Props
Code
<Component order={1} size="md"> Build for 42.</Component>Full prop browser
Build for 42.
Order
order is the semantic level — pick it based on the document outline, not the visual size.
h1 — page title
h2 — section
h3 — subsection
h4 — group
h5
h6
<Title order={1}>Page title</Title>
<Title order={2}>Section</Title>
<Title order={3}>Subsection</Title>
<Title order={4}>Group</Title>Decoupling size from order
Default per-order map:
| order | default size |
|---|---|
| 1 | 4xl |
| 2 | 3xl |
| 3 | 2xl |
| 4 | xl |
| 5 | lg |
| 6 | md |
Override with size when the visual hierarchy and document outline need to diverge — common in marketing pages.
h3 demoted to xl
h2 promoted to 4xl
<Title order={3} size="xl">Smaller subsection</Title>
<Title order={2} size="4xl">Larger-than-its-order heading</Title>API
Prop
Type
Accessibility
Keep order in sync with the document outline. Skipping levels (e.g. jumping from h1 to h4) breaks screen-reader navigation — if you want a visually small heading, set size low and keep order correct.