Contenu limité à la mesure de lecture, gouttière large.
Container
À quoi il sert
Container centre son contenu dans l’axe d’inline, limite sa largeur et réserve une gouttière de chaque côté.
Quand l’utiliser
- Borner la largeur d’une page ou d’une section, centrée horizontalement.
- Limiter un texte à la mesure de lecture avec width="measure".
Quand ne pas l’utiliser
- Pour une mise en page à plusieurs colonnes : utiliser Grid, Sidebar ou Switcher.
- Pour centrer un bloc de texte seul, sans gouttière : utiliser Center.
Exemples
Contenu à la largeur de page, gouttière moyenne.
<Container as="section" width="measure" gutter="l">
<h2>Titre de la section</h2>
<p>Texte limité à la mesure de lecture.</p>
</Container>Variantes
Contenu à la largeur de page, gouttière petite.
Accessibilité
Clavier
- Le composant ne prend pas le focus et ne change pas l’ordre de tabulation.
Lecteur d’écran
- Avec as="main", le repère main est exposé ; as="section" ne crée un repère que s’il porte un nom.
- Le composant n’ajoute ni rôle ni libellé.
Garanti par le composant
- Centrage par margin-inline: auto et largeur maximale via --pp-size-page ou --pp-size-measure.
- Gouttière par padding-inline et tokens --pp-space-*.
À la charge de l’intégrateur
- Un seul main par page : choisir as en conséquence.
- Vérifier le contenu à 320 px : la gouttière ne doit pas réduire la place utile à rien.
Propriétés
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| width | "page" | "measure" | 'page' | Largeur maximale : la page (`--pp-size-page`) ou la mesure de lecture (`--pp-size-measure`). |
| gutter | "s" | "m" | "l" | 's' | Marge intérieure en ligne, pour que le contenu ne touche pas les bords. |
| as | "div" | "section" | "main" | "header" | "footer" | "article" | 'div' | Élément HTML rendu (sémantique de la page). |
| class | string | — | Réservé au placement du composant dans son parent. |
Jetons utilisés
--pp-size-measure--pp-size-page--pp-space-l--pp-space-m--pp-space-s
Preuves et décisions
- WCAG 1.4.10 Reflow (niveau AA) : test sur chaque page construite.
- Tests : packages/astro/test/Container.test.ts, apps/docs/e2e/layout.spec.ts (largeur)
- Code source : packages/astro/src/layout/Container.astro