# Container

> Centers content at a max width with fluid side gutters.

URL: https://apogee.avaui.dev/docs/container
Last updated: 2026-10-15

Centers content at a max width with fluid side gutters.

Last updated October 15, 2026

```astro
<Container width="medium">
<div class="bg-neutral-faded p-4 text-center text-sm">Centered content</div>
</Container>
```

## Add

```sh
npx @ava-ui/apogee add container
```

No Apogee dependencies.

## Usage

```astro
---
import Container from '@/components/apogee/Container/Container.astro'
---
<Container>
  <p>Page content, centered with side gutters.</p>
</Container>
```

## API

`@composable` — exposed to Content Editors in AVA. Any other attribute passes through to the root element.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `as` | `string` | `'div'` | Element/tag to render (e.g. `'section'`, `'main'`). |
| `width` | `'small' \| 'medium' \| 'large' \| 'xlarge' \| 'full'` | `'large'` | Max width: 48 / 64 / 80 / 90rem, or none. |
| `padding` | `'gutter' \| 'none'` | `'gutter'` | Side gutters, or none for edge-to-edge content. |
| `class` | `string` | — | Extra classes, merged last. |

## Sizes

Every size, each with a marker block so the max-width is visible:

```astro
<Container width="small"><div class="bg-neutral-faded p-2 text-center text-sm">sm — max-w-3xl</div></Container>
<Container width="medium"><div class="bg-neutral-faded p-2 text-center text-sm">md — max-w-5xl</div></Container>
<Container><div class="bg-neutral-faded p-2 text-center text-sm">lg — max-w-7xl</div></Container>
<Container width="xlarge"><div class="bg-neutral-faded p-2 text-center text-sm">xl — max-w-[90rem]</div></Container>
<Container width="full"><div class="bg-neutral-faded p-2 text-center text-sm">full — max-w-none</div></Container>
```

## Padding

```astro
<Container width="small">Gutter padding (default)</Container>
<Container width="small" padding="none">No padding</Container>
```

## States

None — Container is a static layout primitive, no interactive or visual states.

## Examples

Rendered as a semantic landmark instead of a `<div>`:

```astro
<Container as="main">
  <h1>Page title</h1>
</Container>
```

Nested, for a full-width band with a narrower content column inside:

```astro
<Container width="full" class="bg-neutral-faded">
  <Container width="medium">
    <p>Narrower content inside a full-bleed background.</p>
  </Container>
</Container>
```

## Accessibility

Native semantics, no extra ARIA needed. Pick `as` to match the correct landmark or semantic element for context (`main`, `section`, `article`, …).

## Tokens

| Token | Used for |
| --- | --- |
| `--spacing-gutter` (via the `px-gutter` utility) | Fluid side padding, clamps across viewport width |

## Do / Don’t + Content

Layout primitive with no content or misuse surface — exempt from Do/Don’t and Content (see the [docs standard](https://apogee.avaui.dev/docs/10-component-docs-standard)).

## Related

[

SectionA full-width band with vertical rhythm and an optional Container, used to lay out page content.

](https://apogee.avaui.dev/docs/section)[

BoxThe layout primitive. Direction, gap, padding, surface, border, radius and shadow as token props.

](https://apogee.avaui.dev/docs/box)[

GridA responsive grid — autofit by default, or a fixed column count.

](https://apogee.avaui.dev/docs/grid)