Contentor

Um contentor centra o seu conteúdo, limita a largura para as linhas de texto continuarem legíveis, e guarda uma margem para que nada toque na berma do ecrã de um telemóvel. Costuma ser a primeira coisa dentro de body().

Contentor básico

Tudo lá dentro fica centrado e deixa de crescer no limite de tamanho.

container(
  text({ variant: 'lead' }, 'Tudo lá dentro fica centrado e deixa de crescer no limite de tamanho.'),
)

Tamanhos

Cinco degraus, de uma única coluna legível até nenhum limite. sm ronda os 40rem — grosso modo a largura que o texto corrido pede.

sm — 40rem

md — 56rem

lg — 72rem (predefinição)

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 (predefinição)'),
  ),
)

Uma largura à medida

width aceita qualquer comprimento CSS e prevalece sobre size, para aquela página que precisa de algo que a escala não tem.

width: 30rem

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

Margem lateral

A margem lateral é o espaçamento mantido entre o conteúdo e a berma da janela. Aceita um token de espaçamento, um número de unidades de espaçamento, ou um comprimento em bruto.

Uma margem mais larga, para uma página cujo conteúdo não deve chegar à berma num tablet.

container({ size: 'sm', gutter: 'xl', style: 'background: var(--su-surface-2); padding-block: 0.75rem' },
  text({ variant: 'small' }, 'Uma margem mais larga, para uma página cujo conteúdo não deve chegar à berma num tablet.'),
)

Como outro elemento

as muda a etiqueta sem mudar mais nada — útil quando o contentor é também o <main> da página ou uma <section>.

Um elemento main

Mesma disposição, marco correto.

container({ as: 'main', size: 'md' },
  heading({ level: 2, size: 'h4' }, 'Um elemento main'),
  text({ tone: 'muted' }, 'Mesma disposição, marco correto.'),
)

Props

Prop	Tipo	Predefinição	Descrição
`size`	`'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'`	`'lg'`	Que limite de largura aplicar.
`width`	`string`	—	Um max-width em bruto, que prevalece sobre size.
`gutter`	`Space`	`'md'`	Espaçamento lateral mantido contra a berma da janela.
`as`	`string`	`'div'`	Elemento a renderizar, por exemplo main ou section.