# Horizontal process list

Horizontal grid of process steps with an optional section heading, intro body, and collection-level links. Each item is a card with heading, body, and optional links.

## When to use

- Multi-step processes, methodologies, or phased offerings laid out in a row (e.g. Listen → Cultivate → Guide → Partner).
- When each step needs a short heading plus richer body copy and optional CTA links.
- Prefer over vertical **Process list** when the layout should read left-to-right across the viewport on laptop.

## Section fields

| Field | Effect |
|---|---|
| `anchor` | Section-level anchor ID for in-page navigation. |
| `backgroundColour` | Section-level background from the palette. |
| `body` | Introductory rich text beside or below the section heading on laptop. |
| `heading` | Section title (rendered as h3). |
| `links` | Collection-level CTA links below the card grid. |
| `textColour` | Section-level text colour from the palette. |

## Card / item fields

- `heading` — step title (rendered as h3 on each card).
- `body` — step description (rich text).
- `links` — optional per-step CTA links.

## Layout

- A full-width divider appears above the section content.
- Heading spans full width on mobile; on laptop it occupies the first three columns.
- Body sits in columns 7–12 on laptop when present.
- Cards form a responsive grid: 1 column on mobile, 2 on tablet, 3 for three items or 4 for four+ on laptop.

## Colours

Section and cards inherit `backgroundColour` and `textColour` from the palette. Link button colour adapts to dark vs light backgrounds.

**Background colours:** Light, Dark, Gray, Orange, Blue, Yellow

**Text colours:** Dark, Light