molecule · stable · since 2026-09
DefinitionList
Purpose
Pairs of a term and its value, as a definition list: the properties of an audit, a site, an account. Two columns when there is room, stacked otherwise; a value can be a string or anything rendered.
When to use, when not
Use it for the properties of one thing. For rows that share columns, Table; for figures that summarise, StatGroup.
Anatomy
- The list.
- One pair per item: the term in small capitals, the value under it.
Props
| Name | Type | Default | What it does |
|---|---|---|---|
items | Item[] | The pairs, in order. | |
columns? | 1 | 2 | 3 | 2 | The columns of pairs when there is room. |
class? | string | '' | Layout classes only. |
value? | Snippet<[Item]> | Renders a value when a string is not enough, given its item. |
States
Plain, with rendered values, and in one column.
plain
Each pair read as a pair; two columns when there is room, stacked at 320 pixels.
Light
- Site audité
- https://demarches.exemple.fr
- Niveau visé
- AA
- Auditeur
- Camille Dupont
- Créé le
- 12 septembre 2026
Dark
- Site audité
- https://demarches.exemple.fr
- Niveau visé
- AA
- Auditeur
- Camille Dupont
- Créé le
- 12 septembre 2026
320 px, light
- Site audité
- https://demarches.exemple.fr
- Niveau visé
- AA
- Auditeur
- Camille Dupont
- Créé le
- 12 septembre 2026
320 px, dark
- Site audité
- https://demarches.exemple.fr
- Niveau visé
- AA
- Auditeur
- Camille Dupont
- Créé le
- 12 septembre 2026
216 px, light
- Site audité
- https://demarches.exemple.fr
- Niveau visé
- AA
- Auditeur
- Camille Dupont
- Créé le
- 12 septembre 2026
Forced colours, captured
rendered
A value that is more than a string: a link, a chip.
Light
- Site audité
- https://demarches.exemple.fr
- Niveau visé
- AA
- Statut
- En cours
Dark
- Site audité
- https://demarches.exemple.fr
- Niveau visé
- AA
- Statut
- En cours
320 px, light
- Site audité
- https://demarches.exemple.fr
- Niveau visé
- AA
- Statut
- En cours
320 px, dark
- Site audité
- https://demarches.exemple.fr
- Niveau visé
- AA
- Statut
- En cours
216 px, light
- Site audité
- https://demarches.exemple.fr
- Niveau visé
- AA
- Statut
- En cours
Forced colours, captured
single
Light
- Site audité
- https://demarches.exemple.fr
- Niveau visé
- AA
- Auditeur
- Camille Dupont
Dark
- Site audité
- https://demarches.exemple.fr
- Niveau visé
- AA
- Auditeur
- Camille Dupont
320 px, light
- Site audité
- https://demarches.exemple.fr
- Niveau visé
- AA
- Auditeur
- Camille Dupont
320 px, dark
- Site audité
- https://demarches.exemple.fr
- Niveau visé
- AA
- Auditeur
- Camille Dupont
216 px, light
- Site audité
- https://demarches.exemple.fr
- Niveau visé
- AA
- Auditeur
- Camille Dupont
Forced colours, captured
Accessibility contract
- Role and name: a
dl; each pair wrapped in adiv, which the element allows. - Keyboard, focus: the values’ own, when they hold a link.
- Live regions: none.
Content rules
French. Terms are nouns (“Site audité”, “Créé le”); values are the facts, formatted for reading.
Do and don’t
- Do keep one value per term; several values need several pairs or a rendered list.
- Do not use it for a form’s summary that the user edits in place; that is a form.
Examples
<DefinitionList items={[{ id: 'site', term: 'Site audité', value: audit.url }, { id: 'level', term: 'Niveau visé', value: audit.level }]} />Surfaces
- App: the account sheet and the profile’s address; the report’s context block waits for the report document.
Related
Table, StatGroup.
Decisions
- 2026-09-24: pairs wrapped in a
div, the HTML standard’s way to group a term and its value for layout.
Criteria held by construction
- 8.9, Dans chaque page web, les balises ne doivent pas être utilisées uniquement à des fins de présentation. Cette règle est-elle respectée ?
A definition list is used for what it is, pairs of a term and a value, where a table would have nothing to cross and divs would have no structure. - 9.3, Dans chaque page web, chaque liste est-elle correctement structurée ?
The list is a real dl with dt and dd, so each pair is read as a pair.
Tokens it reads
- Colour:
--rl-ink,--rl-ink-soft - Typography:
--rl-weight-bold,--rl-text-xs,--rl-tracking-label - Spacing:
--rl-space-1,--rl-space-4,--rl-space-6