# Hero

A full-width section with a two-column layout: copy (heading, body, links) on the left and an animated quadrant visual on the right. Use for page-level hero blocks.

## What it looks like

(Visual description estimated from code; no screenshots available.)

Desktop (laptop and up): two columns within the section grid. Left column (cols 2–5): copy block — heading (h2 typography), body rich text (p2), and link buttons. Right column (cols 7–11): animated quadrant visual (image or animation). Section uses `noBackground` so the section has no background fill. On smaller breakpoints the layout stacks; the visual is below the copy. If no visual is set, the copy column spans the available width.

## Typography

- **Main heading:** Typography class `h2`. Semantic level: first block on page → `<h1>`, otherwise `<h2>`.
- **Body:** `p2` with class `rtf-standard`.

## Colours

**How colours are applied:** The section does not use a section-wide background (`noBackground`). Only `textColour` is used; it is applied to the heading text via the palette. If unset, text uses the default (inherited) colour.

**Valid `textColour` values (from palette):** Bright Blue, Dark, Orange, Primary Blue, Purple, Secondary Blue, White.

## Used fields

| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|-----------------|---------------------------|
| `heading` | Symbol | Main title (h2) | No heading; body or links may be first |
| `body` | RichText | Body copy below heading (p2) | No body block |
| `links` | Array | Row of buttons/links below body | No links block |
| `visual` | EntryLink | Image/animation in right column (AnimatedQuadrantVisual) | No visual column; copy area remains |
| `anchor` | Symbol | HTML `id` on section for in-page linking | No anchor |
| `cmsLabel` | Symbol | Internal label; used for analytics | No visible effect |
| `textColour` | Symbol | Text colour for heading | Inherited text colour |

## Behaviour

- **Position (index):** When this component is the first block on the page (index 0), the heading renders as `<h1>`; otherwise as `<h2>`. Visual size (h2) is unchanged.
- **Section layout:** `sectionClassName` defines grid rows 1–10 / 1–16; content uses `container-row-1-10 laptop:container-row-1-16` and `container-row-6-6 laptop:container-row-6-16`. Copy is in cols 2–5, visual in cols 7–11 on laptop.
- **Links:** Rendered as a row of link buttons (dark style).

## Impact of content changes

| Change | Result |
|--------|--------|
| Add/remove heading | Heading appears or disappears; body/links shift accordingly |
| Add/remove body | Body block appears or disappears |
| Add/remove links | Link row appears or disappears below body |
| Add/remove visual | Visual column appears or disappears; copy column width unchanged on laptop |
| Set textColour | Heading uses that palette colour |

## Screenshots to capture

Recommended variants: default (all fields), no-visual, no-links, minimal (heading only), dark-text (textColour: Dark).