Contenitore

Un contenitore centra il proprio contenuto, limita la larghezza perché le righe di testo restino leggibili, e tiene un margine laterale così che niente tocchi il bordo dello schermo di un telefono. Di solito è la prima cosa dentro body().

Contenitore di base

Tutto ciò che sta dentro resta centrato e smette di crescere al limite di dimensione.

container(
  text({ variant: 'lead' }, 'Tutto ciò che sta dentro resta centrato e smette di crescere al limite di dimensione.'),
)

Dimensioni

Cinque gradini, da una singola colonna leggibile fino a nessun limite. sm è circa 40rem — più o meno la larghezza che la prosa desidera.

sm — 40rem

md — 56rem

lg — 72rem (predefinito)

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 (predefinito)'),
  ),
)

Una larghezza personalizzata

width accetta qualunque lunghezza CSS e scavalca size, per quell’unica pagina che ha bisogno di qualcosa che la scala non prevede.

width: 30rem

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

Margine laterale

Il margine laterale è lo spazio tenuto fra il contenuto e il bordo del viewport. Accetta un token di spaziatura, un numero di unità di spaziatura, oppure una lunghezza grezza.

Un margine più ampio, per una pagina il cui contenuto non dovrebbe arrivare al bordo su un tablet.

container({ size: 'sm', gutter: 'xl', style: 'background: var(--su-surface-2); padding-block: 0.75rem' },
  text({ variant: 'small' }, 'Un margine più ampio, per una pagina il cui contenuto non dovrebbe arrivare al bordo su un tablet.'),
)

Come un altro elemento

as cambia il tag senza cambiare nient’altro — utile quando il contenitore è anche il <main> della pagina o una <section>.

Un elemento main

Stesso layout, punto di riferimento corretto.

container({ as: 'main', size: 'md' },
  heading({ level: 2, size: 'h4' }, 'Un elemento main'),
  text({ tone: 'muted' }, 'Stesso layout, punto di riferimento corretto.'),
)

Props

Prop	Tipo	Predefinito	Descrizione
`size`	`'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'`	`'lg'`	Quale limite di larghezza applicare.
`width`	`string`	—	Una max-width grezza, che scavalca size.
`gutter`	`Space`	`'md'`	Spazio interno tenuto contro il bordo del viewport.
`as`	`string`	`'div'`	Elemento da renderizzare, per esempio main o section.