Purpose

A heading whose level and size are two different things. Choosing a tag “for the size that looks right” is exactly the fault criterion 9.1 sanctions; here the level is required and the size is a separate parameter on the type scale.

When to use, when not

Use it for every heading of a page: the thesis (display), the sections, the sub-sections. Do not use it for a bold line that is not a heading, and do not skip a level to get a smaller size: change size instead.

Anatomy

1. An h1 to h4, in the display typography (weight 700, tight tracking, balanced wrapping).
2. Optionally a measure in characters.

Props

Props of Heading

Name	Type	Default	What it does
level	1 | 2 | 3 | 4		The real level in the document, independent of the displayed size.
size?	'display' | '3xl' | '2xl' | 'xl' | 'lg' | 'base'	'2xl'	`display` for the thesis of a page, otherwise a size of the scale; `base` for a fourth level inside a document.
measure?	number		The maximum line length in characters, so a long heading breaks where it reads.
id?	string		An id, for a section that names itself by its heading through aria-labelledby.
class?	string	''	Layout classes only: margins.
children	Snippet

States

Four levels, six sizes, an optional measure. No interaction.

display

The thesis of a page: one per page, level 1, with a measure so it breaks where it reads.

Light

Les composants, dans tous leurs états.

Dark

Les composants, dans tous leurs états.

320 px, light

Les composants, dans tous leurs états.

320 px, dark

Les composants, dans tous leurs états.

216 px, light

Les composants, dans tous leurs états.

Forced colours, captured

level2

Light

Statuts d'audit

Dark

Statuts d'audit

320 px, light

Statuts d'audit

320 px, dark

Statuts d'audit

216 px, light

Statuts d'audit

Forced colours, captured

levelWithoutSize

A level 3 shown at the lg size: the outline and the look are two decisions.

Light

Paramètres du rapport

Dark

Paramètres du rapport

320 px, light

Paramètres du rapport

320 px, dark

Paramètres du rapport

216 px, light

Paramètres du rapport

Forced colours, captured

measured

Light

Un titre long qui se coupe sur la mesure plutôt que sur la largeur de la page

Dark

Un titre long qui se coupe sur la mesure plutôt que sur la largeur de la page

320 px, light

Un titre long qui se coupe sur la mesure plutôt que sur la largeur de la page

320 px, dark

Un titre long qui se coupe sur la mesure plutôt que sur la largeur de la page

216 px, light

Un titre long qui se coupe sur la mesure plutôt que sur la largeur de la page

Forced colours, captured

Accessibility contract

• Role and name: the heading of its level; the name is its text.
• Keyboard, focus, live regions: none. Screen readers navigate by heading level, which is why the level must be true.
• One h1 per page; levels never skip. Site and app tests check both.

Content rules

French, no trailing period on a short heading, a period when the heading is a sentence (“Les 106 critères.”). Say the thing, not the section’s name.

Do and don’t

• Do pick the level from the outline and then the size from the place.
• Do not use size to fake a hierarchy the outline does not have.
• Do not render two h1.

Examples

<Heading level={1} size="display" measure={16}>Les composants, dans tous leurs états.</Heading>
<Heading level={2}>Actions</Heading>
<Heading level={3} size="lg">Paramètres du rapport</Heading>

Surfaces

• Site: every page (38 files).
• App: the auth pages, the settings, the admin screens, the audit pages.

Related

Eyebrow, Prose, Section.

Decisions

• 2026-08: level is required and has no default, so a heading cannot be added without deciding where it sits.
• 2026-09-24: the display weight is written as 700; the font has no 750 and every browser rendered 700.
• 2026-09-24: rl-heading rules on the display tokens and the type scale; the base layer keeps h-display for the article layout until it moves to the atoms.
• 2026-09-27: h-display leaves the base layer, with no raw use left; rl-prose carries the display face for a Markdown body’s headings.
• 2026-09-26: an id prop, since a section that names itself by its heading needs one, and a base size for the fourth level of the report, a criterion inside a theme inside a part.

Criteria held by construction

• 9.1, Dans chaque page web, l'information est-elle structurée par l'utilisation appropriée de titres ?
  The level is a required prop, separate from the size: the outline of the page is decided by the document, never by how big a title should look.

Tokens it reads

• Colour: --rl-ink
• Typography: --rl-font-sans, --rl-text-2xl, --rl-text-3xl, --rl-text-base, --rl-text-lg, --rl-text-xl, --rl-display, --rl-display-leading, --rl-display-tracking, --rl-display-weight