# Simple hero

A two-column section with copy (heading, postHeading, body, links) on the left and an optional visual on the right. Background and text colour can be set on the copy block. Use for simpler hero blocks without animation.

## What it looks like

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

Desktop: copy block on the left (heading h1, postHeading h6, body p2, links) with optional background and text colour; right side is an optional square image or video. The copy block uses the palette for background and text colour. Link button colour switches to white on dark backgrounds. If no visual is set, only the copy column is shown. Section uses `noBackground`; grid is container-row-1-6 / 6-6 (laptop: 1-12 / 6-12). Content is in cols 3–8 on laptop.

## Typography

- **Heading:** Typography class `h1` (from sizingInformation.h1).
- **Post-heading:** Typography class `h6`.
- **Body:** `p2` with class `rtf-standard`.

## Colours

**How colours are applied:** `backgroundColour` and `textColour` are applied to the **copy block** (left column) via `lookupColourClassNames(backgroundColour, textColour)`. The section uses `noBackground`. Button colour for links is `dark` or `white` when background is dark (`isDarkColour(backgroundColour)`).

**Valid `backgroundColour` values:** Bright Blue, Dark, Gray 1, Gray 2, Green, Inactive Gray, Light Blue, Light Orange, Light Purple, Light, Orange, Primary Blue, Purple, Secondary Blue, White, Yellow.

**Valid `textColour` values:** 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 (h1) | No heading |
| `postHeading` | Symbol | Subtitle below heading (h6) | No postHeading line |
| `body` | RichText | Body copy (p2) | No body block |
| `visual` | EntryLink | Image or video on the right | No visual column |
| `links` | Array | Buttons/links below body | No links block |
| `anchor` | Symbol | HTML `id` for in-page linking | No anchor |
| `cmsLabel` | Symbol | Internal label | No visible effect |
| `textColour` | Symbol | Text colour in copy block | Inherited |
| `backgroundColour` | Symbol | Background of copy block | No background on copy block |

## Behaviour

- **Position (index):** The heading uses `Element` from `getSizingInformation(index)`, so semantic level: first block on page → `<h1>`, otherwise `<h2>`. Visual size is always `h1`.
- **Links:** Rendered as a row of link buttons; button colour is white on dark backgrounds, otherwise dark.
- **Section:** Section has no background. Content spans full width on mobile; on laptop it is in the centre (cols 3–8).

## Impact of content changes

| Change | Result |
|--------|--------|
| Add/remove heading | Heading appears or disappears |
| Add/remove postHeading | Subtitle line appears or disappears |
| Add/remove body | Body block appears or disappears |
| Add/remove links | Link row appears or disappears; button colour follows background |
| Add/remove visual | Visual column appears or disappears |
| Set backgroundColour / textColour | Copy block and link button colour update |

## Screenshots to capture

Recommended variants: default, no-visual, no-links, dark-background, minimal.