A container holds content at a readable maximum width and puts a gutter either side of it. It is
the outermost thing a page's content usually needs, and it is deliberately one thing: no
background, no vertical rhythm and no colour, so a `Section` can add those around it without the
two fighting over the same properties.

It is also the element `Page`, `PageContent`, `PageFooter` and `Section` reuse when they are
`contained`, which is why a page and a band hold their content to the same column without either
of them stating a width of its own.

```tsx demo="layouts/container-preview"
```

## Usage

```tsx
import { Container, Typography } from "@asheeui/web";

<Container size="md">
  <Typography role="body-md">
    INV-1041 covers the March retainer and is due on 31 March.
  </Typography>
</Container>;
```

A width is one of five tokens, and it is a maximum rather than a fixed size: the container fills
its parent and stops at the cap, never exceeding either. `full` removes the cap, which is how a
band states "no column here".

## Width tokens

`size` resolves through the standard cascade, so a product that reads best at one measure states
it once under `components.container.size` and every `Container` you write follows. The parts that
build a container for you state its width themselves, `components.page.containerSize`,
`components.section.containerSize`, which is why the two options are named differently.

```tsx demo="layouts/container-sizes"
```

The tokens step up through `sm`, `md`, `lg` and `xl`, and `full` removes the cap. A token
narrower than the window caps the column; a token wider than it does not engage, which is what
"maximum" means, the content shrinks with its parent instead of overflowing.

## The gutter

The gutter is the one part of a container that is visible at every window width. It is a
horizontal padding from the shared spacing scale, and it widens with the viewport, so content
never touches the edge of a phone and never stretches to the edge of a desktop.

```tsx demo="layouts/container-gutter"
```

Turn `gutter` off when the parent already supplies the margin, a container inside a padded
drawer, or a band that is meant to run edge to edge with its content flush against the window.

## Centring and nesting

`centered` is on by default and is what puts the column in the middle of a wider window: a
container is a block that fills its parent, so without it a capped column would sit at the start
of the row. Turn it off when the container is nested inside one that already centres a narrower
column: the outer container is then the statement, and the inner one repeating it adds a
declaration that does nothing and hides which element is holding the column in place.

Nesting containers multiplies the gutters. That is occasionally what you want, a narrow reading
column inside a band that has its own margin, but it is usually a sign that the outer element
should be a `Section` that is not `contained`, holding one container. For how `contained` and
`containerSize` pair on the elements that build a container for you, see
[Layout and spacing](/concepts/layout-and-spacing).

## Props

```props Container
```

`size: "lg"`, `gutter: true` and `centered: true` are registered by the component, so
`components.container` restates every container in the application at once. Nothing resolves from
`defaultVariant` or `defaultRadius`: a container has no variant and no corners.

The prop is `size` here and `containerSize` on the parts that *hold* a container. The difference
is deliberate: a container states its own width, while a page or a section states which width the
container it builds should have.

## Accessibility

- The element is a plain `div` with no role, so it changes nothing about how the content is
  announced. Use `as` when the container is the structural element itself, `main`, `article`,
  `section`, so the content is not wrapped twice.
- A maximum width is a reading measure: it keeps a line of text at a length the eye can return
  from, and it survives zoom, because the column shrinks with the window instead of holding a
  fixed pixel width.
- The gutter is padding, not margin, so it is inside the container's own box and nothing can
  overlap it; no content is removed or hidden at a narrow width.
- Wrapping content in a container does not reorder it, so the reading order and the tab order are
  the order you wrote.

The spacing scale, the width tokens and `as` are shared by every layout; see
[Layout and spacing](/concepts/layout-and-spacing).

## Related

```related section, stack, page
```