Prototype Library

Container

Centered, max-width layout wrapper with a symmetric side gutter. The single place the kit owns “constrain page content to a readable width.”

Inherited .astro import EsaContainer from '@esa/ecology/esa-container.astro';

Preview

The container fills its parent, caps at maxWidth, centers, and applies a gutter on both sides. The dashed rule below marks its edges.

Content constrained to 480px and centered, with the standard gutter inside the edge.

<Container maxWidth="480px">
  <p>Content constrained to 480px and centered.</p>
</Container>

Widths

The 1556px default is the kit's wide app width — the same figure esa-app-bar centers its own bar at, so a bar and the content beneath it line up without either knowing about the other. Narrow it for reading-width layouts: article bodies, settings forms, single-column detail pages.

640px

420px

260px

<Container maxWidth="1556px">…</Container>  <!-- default: wide app -->
<Container maxWidth="1080px">…</Container>  <!-- dense forms, detail pages -->
<Container maxWidth="720px">…</Container>   <!-- reading width -->

Gutter

The side gutter is --spacing-600 (32px), applied by the component as padding-inline. It is neither a prop nor a per-scope hook: every container on a page breathes the same amount, and a spoke that wants a different amount re-points --spacing-600 once, globally. There is no supported way to widen, narrow, or remove the gutter for one region.

420px, gutter inside the dashed edge

<Container maxWidth="420px">…</Container>
<!-- padding-inline: var(--spacing-600, 2rem) -->

API

PropTypeDefaultDescription
maxWidth string '1556px' Max content width, as any CSS length. The kit's wide page width by default.

Slots

SlotTypeDefaultDescription
default slot — The content being constrained.

Accessibility

  • Renders a plain <div> with no role — it is pure layout and adds nothing to the accessibility tree. Put landmarks (<main>, <section>) around or inside it, not on it.
  • Never remove the gutter globally to fit more in: text touching the viewport edge is a real readability and zoom problem at 320px.
  • The max-width caps the measure, not the font size. Long-form text still wants a narrower maxWidth — around 65–75 characters — rather than a wide container with big type.