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-central/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>
<Title order={3} c="muted">Quieter subsection</Title>

Playground

<Component order={1}>
  Build for 42.
</Component>

Full prop browser

Order

order is the semantic level — pick it based on the document outline, not the visual size.

<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:

Override with size when the visual hierarchy and document outline need to diverge — common in marketing pages.

<Title order={3} size="xl">Smaller subsection</Title>
<Title order={2} size="4xl">Larger-than-its-order heading</Title>

size also accepts h1..h6 and p as friendlier names for the same tokens (h1 -> 4xl, h2 -> 3xl, … h6/p -> md) — size="h1" is identical to size="4xl", just easier to read when you're thinking in heading terms.

<Title order={3} size="h1">Sized like an h1, still an h3</Title>

Color shade

The c prop is the same shade switch as on Text, with the same secondary and muted tiers. default is the strongest foreground rather than Text's inherited color, so headings still stand out. It is not the palette Color — headings don't take accent colors.

<Title order={3}>Default heading</Title>
<Title order={3} c="secondary">Secondary heading</Title>
<Title order={3} c="muted">Muted heading</Title>

API

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.

Changelog