Section

Purpose

The page section, and the owner of the vertical rhythm. Without it, spacing gets negotiated page by page in utility classes and diverges; the site had reached one combination of margins per section.

When to use, when not

Use it for every block of a page that opens with a heading. Do not use it inside a card or a form, and do not nest one inside another.

Anatomy

1. A section element, in the wide container.
2. Optionally a structural rule above, drawn as a top border, never as a background.

Props

Props of Section

Name	Type	Default	What it does
rhythm?	'lead' | 'default' | 'tight'	'default'	`lead` opens the page and breathes more; `tight` follows a section closely.
rule?	boolean	false	A structural rule above, to separate without adding a background.
class?	string	''	Layout classes only: an exceptional margin.
children	Snippet

States

Three rhythms (lead, default, tight) and the optional rule.

lead

The opening of a page: more air above and below.

Light

Une section qui ouvre la page

Dark

Une section qui ouvre la page

320 px, light

Une section qui ouvre la page

320 px, dark

Une section qui ouvre la page

216 px, light

Une section qui ouvre la page

Forced colours, captured

plain

Light

Une section courante

Dark

Une section courante

320 px, light

Une section courante

320 px, dark

Une section courante

216 px, light

Une section courante

Forced colours, captured

ruled

A structural rule above, to separate without a background.

Light

Une section sous un filet

Dark

Une section sous un filet

320 px, light

Une section sous un filet

320 px, dark

Une section sous un filet

216 px, light

Une section sous un filet

Forced colours, captured

tight

Light

Une section serrée

Dark

Une section serrée

320 px, light

Une section serrée

320 px, dark

Une section serrée

216 px, light

Une section serrée

Forced colours, captured

Accessibility contract

• Role and name: a plain section, unnamed, so it is not announced as a region. The heading inside it gives the structure.
• Keyboard, focus, live regions: none.

Content rules

None of its own.

Do and don’t

• Do open a page with the lead rhythm and follow with the default one.
• Do not add margins by hand on a section; change the rhythm.

Examples

<Section rhythm="lead">
	<Eyebrow>Outil de travail</Eyebrow>
	<Heading level={1} size="display">Les composants, dans tous leurs états.</Heading>
</Section>
<Section rule>
	<Heading level={2}>Actions</Heading>
</Section>

Surfaces

• Site: 34 pages.

Related

Heading, Eyebrow, Prose.

Decisions

• 2026-08: the rule is a top border only, because Tailwind’s border-strong is a width that applies to all four sides.
• 2026-09-24: props rhythm (lead, default, tight) and rule; the container, the rhythms and the rule are rl-section rules on the spacing and line tokens.

Criteria held by construction

• 9.2, Dans chaque page web, la structure du document est-elle cohérente ?
  A section element with no name is not a landmark and does not clutter the landmark list; the page's structure stays the headings'.

Tokens it reads

• Colour: --rl-line-strong
• Spacing: --rl-space-12, --rl-space-16, --rl-space-20, --rl-space-24, --rl-space-4, --rl-space-6
• Layout: --rl-border-strong, --rl-container-wide