HTML Layout

This system provides a predictable layout structure that keeps spacing, alignment, and width consistent across all pages.

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 provides consistent horizontal padding.

When to use

• Inside every section
• Whenever content needs safe spacing from screen edges

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

Padding comes from .padding-global, never from containers.

Containers

Containers constrain width and centre content in the viewport.

When to use

• Most page content
• Any readable text or structured layout

Key rules

• Containers centre content
• Containers do not add padding
• Use one container per section (in most cases)

<div class="container-m">
  <div class="block">
    <h2>Heading</h2>
    <p>Content</p>
  </div>
</div>

Variants

Max-Width

Max-width utilities apply width limits only.

When to use

• Special cases
• Content that should not be centred
• Breaking out of container behaviour

Rule of thumb

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

Blocks

Blocks group related content and manage internal spacing.

When to use

• Heading + text
• Text + buttons
• Image + caption
• Any content that belongs together

Default behaviour

• Vertical flex layout
• Uses gap for spacing
• No margins on children

<div class="block">
  <h2>Heading</h2>
  <p>Body text</p>
</div>

Gap modifiers

<div class="block gap-l">
  <h2>Heading</h2>
  <p>More space between elements</p>
</div>

Block Layout Modifiers

Blocks can change layout or alignment.

<div class="block row gap-m align-center">
  <p>Text</p>
  <button>Action</button>
</div>

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

Grids create column-based layouts.
They are not spacing utilities.

Base grid

• Two equal columns
• Default gap applied

<div class="grid">
  <div>Item</div>
  <div>Item</div>
</div>

Column modifiers

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

Item width

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

Rules

• Use grids for layout, not spacing
• Use gap-* to adjust spacing
• Combine column + gap modifiers as needed