Eyebrow

Purpose

The small line above a title that situates the page at a glance: the version of the standard, the scope, the browsers. It is never decorative, so what it says has to be true and useful.

When to use, when not

Use it above the first heading of a page or a section, for one fact the reader needs before the title. Do not use it as a label, a badge or a second title, and never for text that carries the argument: that is the heading’s job.

Anatomy

1. A paragraph in small capitals, soft ink, wide tracking.

Props

Props of Eyebrow

Name	Type	Default	What it does
children	Snippet		The words, short and true: a version, a scope, a browser list.

States

One state: the eyebrow has no interaction and no variant.

long

A long eyebrow wraps; it never truncates, a fact cut short is a fact lost.

Light

Outil de travail · hors indexation · les composants dans tous leurs états, y compris ceux qu'on oublie

Dark

Outil de travail · hors indexation · les composants dans tous leurs états, y compris ceux qu'on oublie

320 px, light

Outil de travail · hors indexation · les composants dans tous leurs états, y compris ceux qu'on oublie

320 px, dark

Outil de travail · hors indexation · les composants dans tous leurs états, y compris ceux qu'on oublie

216 px, light

Outil de travail · hors indexation · les composants dans tous leurs états, y compris ceux qu'on oublie

Forced colours, captured

plain

Light

RGAA 4.1.2 · Chrome et Firefox · Gratuit

Dark

RGAA 4.1.2 · Chrome et Firefox · Gratuit

320 px, light

RGAA 4.1.2 · Chrome et Firefox · Gratuit

320 px, dark

RGAA 4.1.2 · Chrome et Firefox · Gratuit

216 px, light

RGAA 4.1.2 · Chrome et Firefox · Gratuit

Forced colours, captured

Accessibility contract

• Role and name: a paragraph. It is read in the flow, before the heading it introduces.
• Keyboard: none.
• Focus: none.
• Live regions: none.

Content rules

Short, factual, French. Middle dots separate items (“RGAA 4.1.2 · Chrome et Firefox · Gratuit”). No sentence, no verb.

Do and don’t

• Do put one fact per item, and only facts the reader can verify.
• Do not turn it into a heading because it looks like one: the outline is the heading’s, criterion 9.1.

Examples

<Eyebrow>RGAA 4.1.2 · Chrome et Firefox · Gratuit</Eyebrow>
<Heading level={1} size="display">Les 106 critères.</Heading>

Surfaces

• Site: 34 pages open with it.
• App: the error page and the contents heading of the report.

Related

Heading, Prose, Section.

Decisions

• 2026-08: a paragraph rather than a heading, so it never enters the outline.
• 2026-09-24: an rl-eyebrow rule on the tokens, the eyebrow tracking the tokens already defined for it.

Criteria held by construction

• 9.1, Dans chaque page web, l'information est-elle structurée par l'utilisation appropriée de titres ?
  Rendered as a paragraph, never as a heading: it is not a level of the outline, and a screen reader must not count it as one.

Tokens it reads

• Colour: --rl-ink-soft
• Typography: --rl-weight-bold, --rl-text-xs, --rl-tracking-eyebrow