# Split Content

Two-slot side-by-side landing section. Each slot can be a component (usually **Split Text**), Media / external video, or an External component (Hubspot, Pardot, iframe).

## Section fields

| Field | Effect |
|---|---|
| `contents` | Exactly two items. `contents[0]` is left on laptop and first on mobile. `contents[1]` is right on laptop and second on mobile. Extra items are ignored. |
| `backgroundColour` | Section theme. Figma defaults are **White** and **Light**. **Dark** and **Primary Blue** are supported; set `textColour` to **White** on those. |
| `textColour` | Section-level text colour. Child Split Text can still override heading colours. |
| `anchor` | HTML `id` for in-page linking. |
| `cmsLabel` | Internal / analytics. |

Do **not** put the Figma copy in collection `heading` / `body`. Use a Split Text child.

## Allowed children

- Component (prefer **Split Text**)
- Media or External video
- External component (Hubspot form, Pardot, iframe, …)

Do not nest collections in a slot.

## Column split (laptop+)

Default is 50 / 50.

- Media / External video `width` (percent) sets that slot’s column share.
- External `data.widthPercentage` (1–100) sets that slot’s column share.
- Components have no width; they take the remainder.
- If both sides have a width, values are normalized to 100%.
- A single defined width is clamped to 20–80%; the other slot takes the rest.
- Width is **not** applied again inside the slot (no double shrink).
- Mobile ignores width; both slots are full width, stacked in `contents` order.

## Colours

Section may use `backgroundColour` and `textColour` from the palette.

**Background colours:** Light, Primary Blue, Secondary Blue, Bright Blue, Light Blue, Dark, Gray 1, Gray 2, White, Orange, Light Orange, Purple, Light Purple, Green, Yellow, Inactive Gray

**Text colours:** Primary Blue, White, Dark, Secondary Blue, Orange, Purple, Bright Blue

On **Dark** / **Primary Blue** (and other dark palette colours):

- Set collection `textColour` to **White**.
- Split Text buttons go white. Body copy lightens (do not leave default Inactive Gray).
- Prefer a Split Text child with `textColour` **White** for headings.
- Embedded Hubspot / Pardot intro copy inherits the section text colour. Do **not** change the shared form entry’s own `textColour` (that would affect every standalone use). Form fields stay dark-on-white.

## Behaviour

- Laptop: two columns, 48px gap. Text+image is vertically centered; a form in a slot pins both columns (`sticky`) instead of centering.
- Mobile: stack in contents order, 24px gap. First item is always left **and** first on mobile. Text on the right on desktop means media is first, so media is also on top on mobile.
- Visuals get `rounded-card`.
- Embedded externals render without an extra Section wrapper. External `widthPercentage` is not applied again inside the slot.

## Typical recipes

| Intent | contents[0] | contents[1] | Notes |
|---|---|---|---|
| Text left, image right | Split Text | Media | Figma default on White / Light |
| Image left, text right | Media | Split Text | Media first on mobile |
| Text left, form right | Split Text | Hubspot / Pardot | Sticky columns |
| Text + text | Split Text | Split Text | |
| Dark / Primary Blue section | Split Text (`textColour` White) | Media or form | Collection `textColour` White |