# Split Text

Figma-accurate copy stack for one column of Split Content. Use as a child of **Split Content** (not as a full-width page section unless you need the same stack alone). Icon, pre-heading, heading, post-heading, body, and links.

## What it looks like

Vertical stack, left-aligned: optional 40px rounded icon, h7 pre-heading, h3 Playfair heading, h5 post-heading, p2 body, then OM1 arrow buttons. On mobile, buttons stack; on laptop they sit in a row.

## Typography

- **Pre-heading:** `<p>` with class `h7`. Default colour Primary Blue unless `textColour` is set.
- **Heading:** Typography class `h3` (Playfair). Semantic level follows `getSizingInformation(index)`.
- **Post-heading:** `<p>` with class `h5`. Never a heading tag.
- **Body:** `rtf-standard p2`. Inactive Gray on light parents; lighter inherited text on dark parents.

## Colours

**How colours are applied:** `textColour` tints pre-heading, heading, and post-heading. Body is Inactive Gray on light section backgrounds and lightens when the parent Split Content background is a dark palette colour. Link buttons are dark unless the **parent** section background is dark (`Dark`, `Primary Blue`, etc.) — the child’s own `backgroundColour` is ignored when embedded.

On Dark / Primary Blue Split Content, set this entry’s `textColour` to **White**. Do not reuse a light-theme Split Text entry on a dark section.

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

## Used fields

| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|-----------------|---------------------------|
| `icon` | AssetLink | 40×40 rounded icon above the stack | No icon |
| `preHeading` | Symbol | Eyebrow (h7) | No pre-heading |
| `heading` | Symbol | Main title (h3) | No heading |
| `postHeading` | Symbol | Subtitle (h5) | No post-heading |
| `body` | RichText | Body copy | No body |
| `links` | Array | Button row | No buttons |
| `textColour` | Symbol | Heading/pre/post colour | Primary Blue pre-heading, Dark headings |
| `anchor` | Symbol | HTML `id` | No anchor |
| `cmsLabel` | Symbol | Analytics location | No visible effect |
| `componentType` | Symbol | Must be `Split Text` | N/A |

## Behaviour

- **Embedded:** Split Content uses the embedded renderer (no extra Section padding). Heading level is demoted (`getSizingInformation(index, embedded)`).
- **Standalone:** Can render as its own section if dropped on a page.
- **Position (index):** Heading semantic level follows index.

## Impact of content changes

| Change | Result |
|--------|--------|
| Add/remove icon, preHeading, heading, postHeading, body, links | Each block appears or disappears; spacing collapses |
| Set textColour | Pre/heading/post colours update |

## Screenshots to capture

Recommended variants: default (full stack), no-icon, no-links, two-buttons.