Container

Centers content at a max width with fluid side gutters.

Last updated

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

Add

npx @ava-ui/apogee add container

No Apogee dependencies.

Usage

---
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:

sm — max-w-3xl
md — max-w-5xl
lg — max-w-7xl
xl — max-w-[90rem]
full — max-w-none
Show code
<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

Gutter padding (default)
No padding
Show code
<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>:

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

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

<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).

Related

SectionA full-width band with vertical rhythm and an optional Container, used to lay out page content.
BoxThe layout primitive. Direction, gap, padding, surface, border, radius and shadow as token props.
GridA responsive grid — autofit by default, or a fixed column count.