Page Layout

Overview

Every CAAT page is composed of full-width sections stacked vertically. Each section gets a background colour, consistent vertical padding, and contains a .container to constrain content width. This pattern replaces the legacy approach of using thick coloured bars, horizontal rules, or empty spacer components between page blocks.

The system provides three background tiers — white, grey, and blue — that alternate to create natural visual separation. No additional dividers or break elements are needed between sections.

Section Rhythm

Alternate between white and grey backgrounds to create a clear reading rhythm. Use blue sparingly for emphasis sections (stats, CTAs, or key messaging).

Recommended Pattern

Background Tiers

Colour Inversion Rules

When a section uses the blue background, all child components must invert their colours:

Decision Tree: Which Background?

Use this guide when laying out a page to decide each section's background:

Section Spacing

All sections use consistent vertical padding to maintain rhythm. Content is always constrained within a Bootstrap .container.

Section Anatomy

Every page section follows the same structural pattern:

<section class="caat-section caat-section--grey"
         aria-labelledby="section-heading">
  <div class="container">
    <h2 class="caat-section__title" id="section-heading">
      Section heading
    </h2>
    <p class="caat-section__subtitle">
      Supporting description text
    </p>

    <!-- Components go here -->
  </div>
</section>

Anatomy Breakdown

Anti-Patterns

These are common patterns found on the current site that should not be replicated in the new design system.

Grid System

CAAT uses Bootstrap 5's 12-column fluid grid inside every .container. The grid provides responsive breakpoints, gutters, and alignment utilities.

Container widths

Grid rules

• Always nest content in .container → .row → .col-* — never place content directly inside a section without a container.
• Gutter: Default gutter is 1.5rem (24px). Use .g-4 (1.5rem) for card grids, .g-3 (1rem) for tighter layouts.
• No offset hacks: Use .justify-content-center on the row to centre fewer than 12 columns, not empty offset columns.
• Responsive: Always define at least col-12 (mobile) + one larger breakpoint (e.g. col-md-6).

Gutter reference

Column Layouts

Common column patterns used across CAAT pages. Each pattern is responsive — stacking to single-column on mobile.

Standard patterns

Single column (narrow)

For article body text, forms, legal content. Max-width constrained for readability.

Two column — equal (6 + 6)

Side-by-side comparisons, image + text, two feature blocks.

Two column — weighted (8 + 4)

Article with sidebar, main content + CTA panel, video + description.

Three column (4 + 4 + 4)

Card grids, feature trios, icon cards, stat blocks.

Four column (3 + 3 + 3 + 3)

Logo walls, stats strips, small feature cards.

Responsive stacking rules

Page Templates

Six standard page templates define the section structure, grid layout, and component slots for different content types at CAAT. Each template specifies which sections are required vs. optional and what column patterns to use.

Template comparison

AEM Implementation

In AEM, each page section is a Layout Container with a style policy that controls the background colour. Authors select the background when configuring the container — they don't need to add any CSS classes manually.

Layout Container Policy

Style System Mapping

HTL Template

<section class="caat-section ${section.styleClasses}"
         aria-labelledby="${section.id}-heading"
         data-sly-use.section="com.caat.models.SectionModel">
  <div class="container">
    <sly data-sly-resource="${'content' @ resourceType='wcm/foundation/components/responsivegrid'}"/>
  </div>
</section>

Author Guidance

CSS Contract

These classes are available for page-level section styling. They should live in a shared page-layout stylesheet, not in individual component CSS.

/* ── Page section rhythm ── */
.caat-section {
  padding: 4rem 0;
}
.caat-section--grey {
  background: var(--caat-grey);
}
.caat-section--blue {
  background: var(--caat-blue-900);
  color: #fff;
}
.caat-section__title {
  font-family: var(--caat-font-primary);
  font-weight: 900;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  color: var(--caat-blue-900);
  letter-spacing: -.02em;
  text-align: center;
  margin-bottom: .5rem;
}
.caat-section--blue .caat-section__title {
  color: #fff;
}
.caat-section__subtitle {
  text-align: center;
  color: var(--caat-muted);
  max-width: 44rem;
  margin: 0 auto 2.5rem;
  font-size: 1.05rem;
}
.caat-section--blue .caat-section__subtitle {
  color: rgba(255,255,255,.75);
}

Real Examples

The Pensions Matter template demonstrates the alternating pattern in practice:

Notice the strict alternation: white → grey → white → grey, with a single blue emphasis section near the end.