# Title (/docs/title)





`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.

```tsx
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 [#playground]

<story.Playground />

### Full prop browser [#full-prop-browser]

<story.WithControl />

## Order [#order]

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

<Preview align="block" code="&#x22;<Title order={1}>Page title</Title>\n<Title order={2}>Section</Title>\n<Title order={3}>Subsection</Title>\n<Title order={4}>Group</Title>&#x22;">
  <div className="space-y-2">
    <Title order="1">
      h1 — page title
    </Title>

    <Title order="2">
      h2 — section
    </Title>

    <Title order="3">
      h3 — subsection
    </Title>

    <Title order="4">
      h4 — group
    </Title>

    <Title order="5">
      h5
    </Title>

    <Title order="6">
      h6
    </Title>
  </div>
</Preview>

## Decoupling size from order [#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.

<Preview align="block" code="&#x22;<Title order={3} size=\&#x22;xl\&#x22;>Smaller subsection</Title>\n<Title order={2} size=\&#x22;4xl\&#x22;>Larger-than-its-order heading</Title>&#x22;">
  <div className="space-y-2">
    <Title order="3" size="xl">
      h3 demoted to xl
    </Title>

    <Title order="2" size="4xl">
      h2 promoted to 4xl
    </Title>
  </div>
</Preview>

`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.

<Preview code="`<Title order={3} size=&#x22;h1&#x22;>Sized like an h1, still an h3</Title>`">
  <Title order="3" size="h1">
    Sized like an h1, still an h3
  </Title>
</Preview>

## Color shade [#color-shade]

The `c` prop is the same shade switch as on [`Text`](/docs/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.

<Preview align="block" code="&#x22;<Title order={3}>Default heading</Title>\n<Title order={3} c=\&#x22;secondary\&#x22;>Secondary heading</Title>\n<Title order={3} c=\&#x22;muted\&#x22;>Muted heading</Title>&#x22;">
  <div className="space-y-2">
    <Title order="3">
      Default — the strongest foreground
    </Title>

    <Title order="3" c="secondary">
      Secondary — for section labels
    </Title>

    <Title order="3" c="muted">
      Muted — for quieter headings
    </Title>
  </div>
</Preview>

## API [#api]

<TypeTable
  type="{
  order: {
    type: '1 | 2 | 3 | 4 | 5 | 6',
    default: '1',
    description: 'Semantic heading level — picks the <h*> element.',
  },
  size: {
    type: &#x22;'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p'&#x22;,
    description: 'Visual scale — the same one Text uses. Defaults to the per-order map. h1..h6/p are aliases for the same tokens.',
  },
  c: {
    type: &#x22;'default' | 'secondary' | 'muted'&#x22;,
    default: &#x22;'default'&#x22;,
    description: 'Foreground shade switch, shared with Text. Not a palette color.',
  },
  asChild: {
    type: 'boolean',
    default: 'false',
    description: 'Render children as the root element (Ark UI polymorphism).',
  },
}"
/>

## Accessibility [#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.