# Container

> Keeps a page to a readable width, from prose to fluid.

- **Level**: atom · **Status**: stable · **Role**: surface
- **Import**: `import { Container } from "@rrios-forge/ui/atoms/container";`
- **Source**: `packages/ui/src/atoms/container`

Page-width primitive. Picks one of the system's container widths, applies the page gutter and centers itself. Pair with `<Grid>` for the column system.

## Use it for

- Responsive grid / max-width container → `Grid` / `Container`

## Axes

| Axis | Part | Values | Default | Meaning |
|---|---|---|---|---|
| `size` | — | `prose` `sm` `md` `lg` `xl` `fluid` | `lg` | Ergonomic scale, in three families (control, text, container). |
| `padding` | — | `none` `sm` `md` `lg` | `md` | Inner spacing of a container. |
| `centered` | — | `true` `false` | `true` | Container centres itself. |

## Stories

- [Playground](/?path=/story/components-atoms-container--playground) · frame: `/iframe.html?id=components-atoms-container--playground&viewMode=story`
- [Sizes](/?path=/story/components-atoms-container--sizes) · frame: `/iframe.html?id=components-atoms-container--sizes&viewMode=story`
- [Prose width](/?path=/story/components-atoms-container--prose) · frame: `/iframe.html?id=components-atoms-container--prose&viewMode=story`
- [Fluid](/?path=/story/components-atoms-container--fluid) · frame: `/iframe.html?id=components-atoms-container--fluid&viewMode=story`

## Decisions that name it

- ADR-008 — Layout layer: refined `Grid` + new `Container`
- ADR-009 — Editorial Frame: PageShell v3 + new `TopBar` molecule
- ADR-013 — PageShell: mobile-nav polymorphism
- ADR-029 — The page gutter belongs outside the frame

## Always

- Tokens only (R04); variants are semantic axes, never appearance (R02).
- Typography and actions are Poesía atoms, never raw HTML with utilities.
- Vibrant panes need a ground and never nest (ADR-027).