Container

A container centres its contents, caps the width so lines of text stay readable, and keeps a gutter so nothing touches the edge of a phone screen. It is usually the first thing inside body().

Basic container

Everything inside stays centred and stops growing at the size limit.

container(
  text({ variant: 'lead' }, 'Everything inside stays centred and stops growing at the size limit.'),
)

Sizes

Five steps, from a single readable column up to no limit at all. sm is about 40rem — roughly the width prose wants.

sm — 40rem

md — 56rem

lg — 72rem (default)

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

A custom width

width takes any CSS length and overrides size, for the one page that needs something the scale does not have.

width: 30rem

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

Gutter

The gutter is the padding held between the content and the viewport edge. It takes a spacing token, a number of spacing units, or a raw length.

A wider gutter, for a page whose content should not run to the edge on a tablet.

container({ size: 'sm', gutter: 'xl', style: 'background: var(--su-surface-2); padding-block: 0.75rem' },
  text({ variant: 'small' }, 'A wider gutter, for a page whose content should not run to the edge on a tablet.'),
)

As another element

as changes the tag without changing anything else — useful when the container is also the page’s <main> or a <section>.

A main element

Same layout, correct landmark.

container({ as: 'main', size: 'md' },
  heading({ level: 2, size: 'h4' }, 'A main element'),
  text({ tone: 'muted' }, 'Same layout, correct landmark.'),
)

Props

Prop	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'`	`'lg'`	Which width limit to apply.
`width`	`string`	—	A raw max-width, overriding size.
`gutter`	`Space`	`'md'`	Inline padding held against the viewport edge.
`as`	`string`	`'div'`	Element to render, e.g. main or section.