Default — Just the Container
The Etch container is already a flex-column with gap, capped to the site grid (~1366px) and centered horizontally. For default left-aligned content, you do NOT need an inner div — children stack with the default content gap. This is the simplest pattern and the most common.
Centered — Utilities on the Container
When you don't need a width cap or a responsive flip, apply .text--center and .align-items--center directly to the Etch container. No inner div needed. This keeps markup minimal and the container does double duty as the site grid AND the layout.
Left Desktop, Center Mobile — .center-mobile
A responsive variant. Desktop: left-aligned with the inner stack hugging the site grid's left edge. Mobile (≤ 700px): flips to centered presentation. Because .center-mobile overrides align-self and margin-inline, it MUST live on an inner div — applying it to the Etch container would break the site grid centering.
Banner Pattern — .center-mobile + .max-width–m
The canonical hero-banner inner stack. Capped at 90ch for readable line length, with the responsive alignment flip. Compose .flex--col gap--m max-width--m center-mobile on an inner div. The OUTER container stays bare so its left edge respects the site grid.
Left-Aligned, Capped at 90ch
When you need a readable line-length cap without centering, wrap content in .flex--col gap--m max-width--m. The container respects the site grid; the inner div carries the cap. Useful for blog headers, documentation intros, or content-heavy sections where left-alignment is the natural reading rhythm.
Centered + Tight Cap (70ch)
Compose .flex--col gap--m max-width--s align-items--center text--center on the inner div, AND .align-items--center on the container. Why both: the inner div's align-items--center centers ITS children. The container's align-items--center centers the inner div itself horizontally on the page — without it, the capped box sits at the container's left edge.
Centered + Standard Cap (90ch)
The sweet spot for centered intros at 90ch. Compose .flex--col gap--m max-width--m align-items--center text--center on the inner div, AND .align-items--center on the container. The container needs the centering utility because by default flex children sit at flex-start — capping width without centering produces a left-aligned narrow box.
Centered + Loose Cap (110ch)
Looser 110ch cap for content-heavy intros. Compose .flex--col gap--m max-width--l align-items--center text--center on the inner div, AND .align-items--center on the container to center the capped box on the page.
With Kicker (Eyebrow)
An intro with an eyebrow/kicker <span> above the heading. The container handles flex-col + gap + centering directly via .text--center .align-items--center — no inner div needed. The kicker, heading, and subtitle stack with the default content gap.
With Top Icon
An intro with a decorative SVG icon above the heading. Same pattern as the kicker — utilities on the container, no inner div. The icon, heading, and subtitle stack with the default content gap.
With Bottom CTA
An intro with a CTA button below the copy. Container handles layout directly. The button appears at intrinsic width because .align-items--center overrides the default stretch behavior, preserving the button's natural sizing.