Library · Foundations

Container

Centres content at a standard max width (--width-narrow/content/wide tokens). Use inside a Section — the Section owns the horizontal gutter.

Live preview — edit theme bottom-right 
---
import Section from "../components/primitives/layout/Section.astro";
import Container from "../components/primitives/layout/Container.astro";
---
<Section tone="base-200" padBlock="sm">
  <Container width="narrow" class="demo">
    <p class="type-body">width="narrow" (--width-narrow)</p>
  </Container>
</Section>
<Section tone="base-200" padBlock="sm">
  <Container width="content" class="demo">
    <p class="type-body">width="content" (--width-content, default)</p>
  </Container>
</Section>
<Section tone="base-200" padBlock="sm">
  <Container width="wide" class="demo">
    <p class="type-body">width="wide" (--width-wide)</p>
  </Container>
</Section>

Props

NameTypeRequiredDescription
width 'narrow' | 'content' | 'wide' — Max content width token (default: 'content')
class string — Additional classes
[key: string] unknown — HTML attributes
(slot) children — Content to centre.

Example with all props

<Container width="content" class="intro-copy">
  …
</Container>