Layout

Layout primitives control structure and flow: how content stacks, how columns form, and how sections are contained. They work with spacing tokens (see Spacing) but serve a different purpose: spacing defines distance, layout defines arrangement.

Page Structure

All pages follow the same hierarchy:

body
└─ page-wrapper
└─ page-content
└─ section
└─ padding-global
└─ container / max-width
└─ block

Why this matters

• Clear separation of concerns
• Consistent spacing and widths
• Easy to scan and reason about layouts

<section>
  <div class="padding-global">
    <div class="container-m">
      <div class="block">
        <!-- Content -->
      </div>
    </div>
  </div>
</section>

Sections

Sections group major content areas and control vertical spacing.

When to use

• Every major page section
• Any time you need vertical rhythm between content groups

Rules

• Sections own vertical spacing
• Use .top-* and .bottom-* classes
• Do not apply margins inside sections

<section class="top-large bottom-large">
  <div class="padding-global">
    <!-- Content -->
  </div>
</section>

Padding Global

.padding-global adds consistent horizontal padding to the page. It is applied once per section row, wrapping the container. Padding comes from .padding-global, never from containers.

<section>
  <div class="padding-global">
    <div class="container-m">
      <!-- Content here -->
    </div>
  </div>
</section>

Containers

Containers centre content and cap its maximum width. Use them inside sections to control content density.

<div class="container-s">Narrow content</div>
<div class="container-m">Standard content</div>
<div class="container-l">Wide content</div>

Rules

• Containers add margin-left: auto and margin-right: auto. They centre themselves
• Containers set width: 100% so they fill available space up to the max-width
• Containers do not add padding — nest them inside .padding-global for consistent page margins
• Use one container per section (in most cases)

Max-Width Utilities

Max-width utilities cap width without centring. Use them on individual elements that need a width constraint but should stay in normal flow.

<p class="max-width-s">This paragraph won't exceed 640px.</p>

Containers vs Max-Width

• Container = max-width + auto margins (centred)
• Max-width = max-width only (stays in flow, left-aligned)

Rule of thumb

• Centre content → use a container
• Only limit width → use max-width (exception, not default)

Blocks

A .block is a vertical flex stack with a default gap of var(--space-m) between children. It is the fundamental building block for content layout — heading + text, text + buttons, image + caption, any content that belongs together.

No margins on children — enforced in CSS: .block > * zeroes margin-block, so gap-* is the only source of vertical spacing inside a block. Flex gap does not collapse with margins, it adds to them; without the reset, element defaults would compound with the gap. Horizontal margins survive — data-align="center" relies on margin-inline: auto.

Default gap

<div class="block">
  <div>First item</div>
  <div>Second item</div>
  <div>Third item</div>
</div>

Gap modifiers

Add .gap-* to control spacing between children. These work on both .block and .grid.

Horizontal row

Add .row to a block to switch from vertical stacking to horizontal layout. Use .row-reverse for right-to-left order.

<div class="block row gap-xl">
  <div>Left</div>
  <div>Centre</div>
  <div>Right</div>
</div>

Alignment modifiers

Use alignment classes on .block (or .block .row) to control cross-axis and main-axis positioning.

Self Alignment

data-align centres the element itself within its parent, distinct from the .align-* classes above, which align children inside a flex block.

Use to centre a block without wrapping it in data-grid + data-col-start / data-col-span. Works in both normal block/flex flow and inside data-grid parents.

Width is required

margin-inline: auto is a no-op without a width constraint. .block fills 100% of its parent by default, so data-align="center" alone does nothing visible.

Pair with one of:

• data-line-length="headline | small | body | medium | wide": applies a max-width from the typography scale (see Typography → Line Length)
• A max-width from a component class
• An explicit width

<div class="block" data-align="center" data-line-length="medium">
  <h2>Centred headline</h2>
  <p>Centred paragraph with a comfortable measure.</p>
</div>

Grid

CSS grid layout with column presets. Grids create column-based layouts — they are not spacing utilities. The default is a responsive 2-column grid. Add .cols-3 or .cols-4 for more columns, and .gap-* to control gutter size.

Default (2 columns)

<div class="grid">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

3 columns

<div class="grid cols-3">
  <div>Item 1</div>
  <div>Item 2</div>
  ...
</div>

4 columns with small gap

Item width

<div class="grid">
  <div>Flexible column</div>
  <div class="fit-content">Fixed</div>
</div>

Padding Utilities

General-purpose padding utilities for spacing inside elements.

Key Rules

• Sections control macro spacing (.top-*, .bottom-* classes)
• Blocks control micro spacing (.gap-* between children)
• Grids control column layout. Use .gap-* for gutters
• Containers control width and centring. Never apply spacing directly to them
• Never mix responsibilities across layers
• Never use spacer divs or apply margins inside blocks
• Always use gap utilities for spacing between siblings, not margin on individual children