# Container

> A centred, width-limited column — the outermost wrapper on most pages.

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

```javascript
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.

```javascript
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.

```javascript
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.

```javascript
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>`.

```javascript
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. |