imitation
Heading
A real h1, h2 or h3, not styled text.
LevelsOne title, then nested sections
Harbour rebrand
Launch kit
Print files
Identity, site and launch kit for the harbour trust
Launch kit
Print files
In context
Project pageLevels give the page its outline
Harbour rebrand
Identity, site and launch kit for the harbour trust.
Milestones
Launch on 24 Oct.
This week
Homepage in progress, palette signed off.
Eyebrow and rule
Heading eyebrow and ruleA kicker above, linked by aria-labelledby; a trailing hairline
Today · Friday 24 October
Saint Raphael the Archangel
Your data
Download or delete everything tied to your account.
Props
| Prop | Type | Required | Default |
|---|---|---|---|
level | 1 | 2 | 3 | undefined | No | 1 |
bionic | boolean | undefined | No | — |
bionicOptions | BionicOptions | undefined | No | — |
eyebrow | ReactNode | No | — |
rule | boolean | undefined | No | — |
Semantics
level (1 to 3) renders a real <h1>, <h2> or <h3>, so screen-reader heading navigation and outline tools see it. Use one level={1} per page and nest the rest.
data-rebar-* attributes
data-rebar-component="heading", data-rebar-level set to the current level.
Migrating to Ant Design
Not codemod-covered. AntD's Typography.Title covers the same role with a level prop (1 to 5).
Overriding the size
The base level size rules sit in :where() (zero specificity), so a plain class selector such as .hero-title { font-size: 2.5rem } overrides a heading's size without !important. Weights keep their normal specificity.