Conteneur

Un conteneur centre son contenu, plafonne la largeur pour que les lignes de texte restent lisibles, et garde une gouttière pour que rien ne touche le bord d’un écran de téléphone. C’est en général la première chose à l’intérieur de body().

Conteneur de base

Tout ce qui est à l’intérieur reste centré et cesse de grandir à la limite de taille.

container(
  text({ variant: 'lead' }, 'Tout ce qui est à l’intérieur reste centré et cesse de grandir à la limite de taille.'),
)

Tailles

Cinq crans, d’une seule colonne lisible jusqu’à aucune limite du tout. sm fait environ 40rem — à peu près la largeur que réclame la prose.

sm — 40rem

md — 56rem

lg — 72rem (par défaut)

stack({ gap: 'sm' },
  container({ size: 'sm', style: 'background: var(--su-surface-2); padding-block: 0.75rem' },
    text({ variant: 'small', align: 'center' }, 'sm — 40rem'),
  ),
  container({ size: 'md', style: 'background: var(--su-surface-2); padding-block: 0.75rem' },
    text({ variant: 'small', align: 'center' }, 'md — 56rem'),
  ),
  container({ size: 'lg', style: 'background: var(--su-surface-2); padding-block: 0.75rem' },
    text({ variant: 'small', align: 'center' }, 'lg — 72rem (par défaut)'),
  ),
)

Une largeur sur mesure

width prend n’importe quelle longueur CSS et prime sur size, pour la page qui a besoin de ce que l’échelle n’offre pas.

width: 30rem

container({ width: '30rem', style: 'background: var(--su-surface-2); padding-block: 0.75rem' },
  text({ variant: 'small', align: 'center' }, 'width: 30rem'),
)

Gouttière

La gouttière est la marge intérieure maintenue entre le contenu et le bord de la fenêtre. Elle prend un jeton d’espacement, un nombre d’unités d’espacement, ou une longueur brute.

Une gouttière plus large, pour une page dont le contenu ne doit pas courir jusqu’au bord sur une tablette.

container({ size: 'sm', gutter: 'xl', style: 'background: var(--su-surface-2); padding-block: 0.75rem' },
  text({ variant: 'small' }, 'Une gouttière plus large, pour une page dont le contenu ne doit pas courir jusqu’au bord sur une tablette.'),
)

Comme un autre élément

as change la balise sans rien changer d’autre — pratique quand le conteneur est aussi le <main> de la page ou une <section>.

Un élément main

Même mise en page, repère correct.

container({ as: 'main', size: 'md' },
  heading({ level: 2, size: 'h4' }, 'Un élément main'),
  text({ tone: 'muted' }, 'Même mise en page, repère correct.'),
)

Props

Prop	Type	Défaut	Description
`size`	`'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'`	`'lg'`	Quelle limite de largeur appliquer.
`width`	`string`	—	Une max-width brute, qui prime sur size.
`gutter`	`Space`	`'md'`	Marge intérieure tenue contre le bord de la fenêtre.
`as`	`string`	`'div'`	Élément à rendre, par exemple main ou section.