CodeBlock

Purpose

Text the reader copies rather than reads: a selector, a secret key, a token, a line of code. In the mono face, on the sunken surface, inline in the running text or as a block.

When to use, when not

Use it for a value that is code or behaves like it: a CSS selector under a comment, a secret to type into an authenticator, a masked token. Not for a key of the keyboard (Kbd), not for an identifier that reads as a word, such as a criterion’s number.

Anatomy

1. Inline: a code element.
2. Block: a pre holding a code; with label, the pre is a group named by it, since a bare pre is generic and cannot take a name.

Props

Props of CodeBlock

Name	Type	Default	What it does
inline?	boolean	false	In the running text, as a `code` element; otherwise a block.
label?	string		What the block holds, as its accessible name: "Clé de secours". Block only.
children	Snippet		The text.

States

Inline in a sentence, a block, and a long value that wraps.

block

A named block, the value the reader types elsewhere.

Light

JBSW Y3DP EHPK 3PXP JBSW Y3DP

Dark

JBSW Y3DP EHPK 3PXP JBSW Y3DP

320 px, light

JBSW Y3DP EHPK 3PXP JBSW Y3DP

320 px, dark

JBSW Y3DP EHPK 3PXP JBSW Y3DP

216 px, light

JBSW Y3DP EHPK 3PXP JBSW Y3DP

Forced colours, captured

inline

A selector in the running text.

Light

Le sélecteur footer .legal-links désigne le lien en défaut.

Dark

Le sélecteur footer .legal-links désigne le lien en défaut.

320 px, light

Le sélecteur footer .legal-links désigne le lien en défaut.

320 px, dark

Le sélecteur footer .legal-links désigne le lien en défaut.

216 px, light

Le sélecteur footer .legal-links désigne le lien en défaut.

Forced colours, captured

long

A token that wraps rather than scrolling the page.

Light

pat_9f2c1e7a4b8d3f6e0a1c5b7d9e2f4a6c8b0d1e3f5a7c9b2d4f6e8a0c1b3d5f7e9a

Dark

pat_9f2c1e7a4b8d3f6e0a1c5b7d9e2f4a6c8b0d1e3f5a7c9b2d4f6e8a0c1b3d5f7e9a

320 px, light

pat_9f2c1e7a4b8d3f6e0a1c5b7d9e2f4a6c8b0d1e3f5a7c9b2d4f6e8a0c1b3d5f7e9a

320 px, dark

pat_9f2c1e7a4b8d3f6e0a1c5b7d9e2f4a6c8b0d1e3f5a7c9b2d4f6e8a0c1b3d5f7e9a

216 px, light

pat_9f2c1e7a4b8d3f6e0a1c5b7d9e2f4a6c8b0d1e3f5a7c9b2d4f6e8a0c1b3d5f7e9a

Forced colours, captured

Accessibility contract

• Role and name: code inline, read as code by the readers that say so; a block is a pre, which becomes a group named by label when one is given, and stays generic and nameless otherwise.
• Keyboard, focus: none; a block that overflows does not scroll, it wraps.
• Live regions: none.

Content rules

The text is the value, verbatim, nothing added. The label, when there is one, says what the value is (“Clé de secours”), in French.

Do and don’t

• Do give a block a label when its content is not obvious from the sentence before it.
• Do not put a sentence in it: it is for values, and its face says so.

Examples

<p>Le sélecteur <CodeBlock inline>footer .legal-links</CodeBlock> désigne l'élément.</p>
<CodeBlock label="Clé de secours">JBSW Y3DP EHPK 3PXP</CodeBlock>

Surfaces

• App: the selectors of the audited page and the report, the second factor’s key, the temporary password, the masked tokens.
• Site: the sheets’ code samples, when they leave the hand-written pre.

Related

Kbd, Figure.

Decisions

• 2026-09-26: no copy button: the product’s values are short and selected in one gesture, and a button per value is a stop per value at the keyboard.

Criteria held by construction

• 10.11, Pour chaque page web, les contenus peuvent-ils être présentés sans avoir recours à un défilement vertical pour une fenêtre ayant une hauteur de 256px ou à un défilement horizontal pour une fenêtre ayant une largeur de 320px ?
  A long value wraps anywhere, so a token or an address never makes the page scroll sideways at 320 pixels.
• 10.4, Dans chaque page web, le texte reste-t-il lisible lorsque la taille des caractères est augmentée jusqu'à 200%, au moins ?
  The size is a token of the scale, so the text grows with the reader's zoom like the rest.

Tokens it reads

• Colour: --rl-ink, --rl-line, --rl-sunken
• Typography: --rl-font-mono, --rl-text-sm
• Spacing: --rl-space-1-5, --rl-space-3, --rl-space-4
• Layout: --rl-radius, --rl-border