Contenedor

Un contenedor centra su contenido, limita el ancho para que las líneas de texto sigan siendo legibles y mantiene un margen para que nada toque el borde de la pantalla de un móvil. Suele ser lo primero dentro de body().

Contenedor básico

Todo lo de dentro se queda centrado y deja de crecer al llegar al límite de tamaño.

container(
  text({ variant: 'lead' }, 'Todo lo de dentro se queda centrado y deja de crecer al llegar al límite de tamaño.'),
)

Tamaños

Cinco pasos, desde una única columna legible hasta ningún límite. sm ronda las 40rem, más o menos el ancho que pide la prosa.

sm — 40rem

md — 56rem

lg — 72rem (por defecto)

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

Un ancho a medida

width admite cualquier longitud CSS y manda sobre size, para esa página que necesita algo que la escala no tiene.

width: 30rem

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

Margen lateral

El margen lateral es el relleno que se mantiene entre el contenido y el borde de la ventana. Admite un token de espaciado, un número de unidades de espaciado o una longitud tal cual.

Un margen más ancho, para una página cuyo contenido no debería llegar al borde en una tableta.

container({ size: 'sm', gutter: 'xl', style: 'background: var(--su-surface-2); padding-block: 0.75rem' },
  text({ variant: 'small' }, 'Un margen más ancho, para una página cuyo contenido no debería llegar al borde en una tableta.'),
)

Como otro elemento

as cambia la etiqueta sin cambiar nada más — útil cuando el contenedor es además el <main> de la página o una <section>.

Un elemento main

La misma maquetación, el punto de referencia correcto.

container({ as: 'main', size: 'md' },
  heading({ level: 2, size: 'h4' }, 'Un elemento main'),
  text({ tone: 'muted' }, 'La misma maquetación, el punto de referencia correcto.'),
)

Props

Prop	Tipo	Por defecto	Descripción
`size`	`'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'`	`'lg'`	Qué límite de ancho se aplica.
`width`	`string`	—	Un max-width tal cual, que manda sobre size.
`gutter`	`Space`	`'md'`	Relleno en línea que se mantiene contra el borde de la ventana.
`as`	`string`	`'div'`	Elemento que se renderiza, por ejemplo main o section.