# CTA: Large

A large call-to-action block: white content box with heading and optional body, plus a full-width CTA button below. Use for prominent page-level CTAs.

## What it looks like

Desktop: a centred block (6 cols, large vertical margin). White box with heading (h2 typography), optional body (p2), and a single CTA button below. The section can have a background colour; only `textColour` is used on the component (heading text). Large variant is flex-col with full-width button.

## Typography

- **Main heading:** Typography class `h2`. Semantic level: first block on page → `<h1>`, otherwise `<h2>`.
- **Body:** `p2` with `rtf-standard` (only shown for CTA: Large, not Small).

## Colours

**How colours are applied:** The section wrapper can receive `backgroundColour` and `textColour` from the entry. The component uses `textColour` on the heading (via palette). The content box is always white; section background is separate.

**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 (h2 for Large) | No heading |
| `body` | RichText | Body copy below heading (Large only) | No body block |
| `links` | Array | First link used as CTA button label and URL | Button shows "Text" and # if no link |
| `anchor` | Symbol | HTML `id` for in-page linking | No anchor |
| `cmsLabel` | Symbol | Internal/analytics | No visible effect |
| `textColour` | Symbol | Heading text colour | Default colour |
| `componentType` | Symbol | "CTA: Large" vs "CTA: Small" (size/layout) | N/A |
| `id` | Symbol | Entry id for preview | No visible effect |
| `index` | Number | Affects heading level | N/A |

## Behaviour

- **Size:** "CTA: Large" uses larger heading (h2), shows body, full-width button, and large vertical margin (my-40). "CTA: Small" uses h3, no body in layout, different button sizing.
- **Links:** Only the first link is used; rendered as a single CTA button.
- **Position (index):** First block on page → heading is `<h1>`, else `<h2>`. Embedded uses h2 for Large.
- **Section:** Section wrapper receives information so section-level background can be set in CMS.

## Impact of content changes

| Change | Result |
|--------|--------|
| Add/remove heading | Heading appears or disappears |
| Add/remove body | Body block appears or disappears (Large only) |
| Add/remove or change first link | CTA button label and URL update |
| Set textColour | Heading uses that palette colour |

## Screenshots to capture

Recommended variants: default, no-body, dark-text, primary-blue-text, minimal (heading only).