molecule · stable · site · since 2026-08
Callout
Purpose
A block framed by a structural line. It was rewritten by hand about fifteen times during the redesign, each page copying the same border style, and a copied shape diverges. The status changes the colour of the line, never a fill.
When to use, when not
Use it to set a passage apart: a definition, an aside, a quoted rule, a block that borrows a status colour with its word inside. Do not use it for a message about an action (that is Alert) nor as a card in a grid.
Anatomy
- A
div, or anasidewhen the content is beside the point. - A line around: strong or subtle, neutral or in a status colour.
Props
| Name | Type | Default | What it does |
|---|---|---|---|
rule? | 'strong' | 'subtle' | 'strong' | `strong` for a block that carries an argument, `subtle` for an aside. |
status? | 'NC' | 'C' | Borrows the colour of an audit status. Always with the word inside the block. | |
aside? | boolean | false | Renders an `aside`: for content truly beside the point. |
class? | string | '' | Layout classes only, margins and the like. |
children | Snippet |
States
Strong or subtle line, neutral or in the NC or C colour, as an aside or not.
aside
An aside element: a complementary landmark, for content truly beside the point.
Light
Dark
320 px, light
320 px, dark
216 px, light
Forced colours, captured
c
Light
Conforme : chaque image porte une alternative pertinente.
Dark
Conforme : chaque image porte une alternative pertinente.
320 px, light
Conforme : chaque image porte une alternative pertinente.
320 px, dark
Conforme : chaque image porte une alternative pertinente.
216 px, light
Conforme : chaque image porte une alternative pertinente.
Forced colours, captured
nc
The line borrows the non-conformity colour; the words inside say the status.
Light
Non conforme : le lien n'a pas d'intitulé.
Dark
Non conforme : le lien n'a pas d'intitulé.
320 px, light
Non conforme : le lien n'a pas d'intitulé.
320 px, dark
Non conforme : le lien n'a pas d'intitulé.
216 px, light
Non conforme : le lien n'a pas d'intitulé.
Forced colours, captured
strong
Light
Une définition qui mérite un cadre.
Dark
Une définition qui mérite un cadre.
320 px, light
Une définition qui mérite un cadre.
320 px, dark
Une définition qui mérite un cadre.
216 px, light
Une définition qui mérite un cadre.
Forced colours, captured
subtle
Light
Une note, d'un trait plus léger.
Dark
Une note, d'un trait plus léger.
320 px, light
Une note, d'un trait plus léger.
320 px, dark
Une note, d'un trait plus léger.
216 px, light
Une note, d'un trait plus léger.
Forced colours, captured
Accessibility contract
- Role and name: none for a
div; a complementary landmark for anaside, so useasideonly for content that is truly aside. - Keyboard, focus, live regions: none.
Content rules
A block in a status colour says the status in words inside it.
Do and don’t
- Do use the subtle line for an aside and the strong one for an argument.
- Do not fill it: the direction refuses colour slabs.
Examples
<Callout>Une définition qui mérite un cadre.</Callout>
<Callout rule="subtle" aside>Un aparté, vraiment à côté du propos.</Callout>
<Callout status="NC">Non conforme : le lien n'a pas d'intitulé.</Callout>Surfaces
- Site: the criteria sheets, the pricing page.
Related
Alert.
Decisions
- 2026-08: the line, never a fill.
- 2026-09-24: renamed from Encadre, props
rule,status,aside; the line is modifier classes, so a prop that changes after mount redraws, which the style computed once did not.
Criteria held by construction
- 3.1, Dans chaque page web, l'information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?
The status changes only the line; a status colour on the frame never carries the information alone, the words inside do. - 3.2, Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé ?
No fill, so there is no second background whose contrast would have to be checked.