# Centered block

A centered content block with optional icon, heading, body, links, and visual. Can render with a full-width background visual and overlay, or as a simple centered column. Use for key messages or feature highlights.

## What it looks like

- **Default:** Centered column (laptop: cols 3–10). Icon (if set), preHeading (h6), main heading (h1/h2), postHeading (h6), body (p2 or h4 when background visual), links, optional visual at bottom (rounded, fixed height). No section background.
- **No visual:** Same layout; body and links only, no image at bottom.
- **With background visual:** Full-width rounded block with background image/video and overlay; text and links centered with textColour applied; body uses h4 and narrower width; no bottom visual.
- **Colour variants (Dark, Primary Blue):** When section receives backgroundColour/textColour they apply to the block (e.g. dark background, white text).
- **Minimal:** Heading only; no body, links, or visual.

## Typography

- **Main heading:** Typography class from sizing (first block → h1, else h2). Semantic level: first block → `<h1>`, otherwise `<h2>`.
- **Pre-heading / post-heading:** `h6`.
- **Body:** `p2` normally; with background visual: `h4 laptop:mx-cols-2`.
- **Additional copy:** `p2`.

## Colours

**How colours are applied:** Section uses `noBackground`. When `backgroundVisual` is set, `textColour` is applied to the overlay content. When only `backgroundColour`/`textColour` are set (no background visual), they are not applied by this component (section has noBackground). Colours for the block with background visual come from `backgroundColour`/`textColour` on the inner wrapper or from the overlay.

**Valid values (from palette):** backgroundColour: Bright Blue, Dark, Gray 1, Gray 2, Green, Light Blue, Light Orange, Light Purple, Light, Orange, Primary Blue, Purple, Secondary Blue, White, Yellow. textColour: 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 (sizing h1/h2) | No heading |
| `preHeading` | Symbol | Line above heading (h6) | No preHeading |
| `postHeading` | Symbol | Line below heading (h6) | No postHeading |
| `body` | RichText | Body copy (p2 or h4 with background visual) | No body block |
| `visual` | EntryLink | Image/video at bottom (rounded) | No bottom visual; only when no backgroundVisual |
| `links` | Array | Row of links below body | No links block |
| `additionalCopy` | RichText | Extra copy below visual (p2) | No additional copy |
| `icon` | AssetLink | Small icon above preHeading | No icon |
| `anchor` | Symbol | HTML `id` for in-page linking | No anchor |
| `cmsLabel` | Symbol | Internal/analytics label | No visible effect |
| `backgroundColour` | Symbol | Section/block background (when used) | Default/inherited |
| `backgroundVisual` | AssetLink | Full-width background media with overlay | Default centered layout without overlay |
| `backgroundOverlayOpacity` | Number | Overlay opacity over background visual | Default opacity |
| `textColour` | Symbol | Text colour (e.g. on background visual) | Inherited |

## Behaviour

- **Position (index):** First block on page (index 0) → heading is `<h1>` and h1 typography; otherwise `<h2>` and h2 typography.
- **Section layout:** `noBackground`; content in grid rows 1–8 / 1–16; centered column `laptop:col-start-3 laptop:col-span-8` when no background visual; full width when background visual.
- **Background visual:** When `backgroundVisual` is set, the block uses BackgroundMedia, overlay, and centered content with `textColour`; body uses h4 and constrained width; bottom `visual` is hidden.

## Impact of content changes

| Change | Result |
|--------|--------|
| Add/remove heading | Heading appears or disappears |
| Add/remove preHeading/postHeading | Eyebrow line appears or disappears |
| Add/remove body | Body block appears or disappears |
| Add/remove visual | Bottom visual appears or disappears (only when no backgroundVisual) |
| Add/remove links | Link row appears or disappears |
| Set backgroundVisual | Layout switches to full-width background block; textColour and overlay apply; bottom visual hidden |
| Set backgroundColour/textColour | When used, block or overlay uses those colours |

## Screenshots to capture

Recommended variants: default, no-visual, navy (Dark + White), minimal, primary-blue.