# CTA: Small

A compact call-to-action: white content box with heading and a single CTA button. Use for inline or secondary CTAs (e.g. in sidebars or after copy). Smaller than CTA: Large; no body copy.

## What it looks like

Desktop: a block with modest vertical margin (my-10). White box with heading (h3 typography) and a single CTA button. When not embedded, layout can be flex-row on laptop with button beside the box; when embedded, stacked (flex-col) and centred. Section can have a background colour; only `textColour` is used on the component (heading text). Small variant uses h3 and no body.

## Typography

- **Main heading:** Typography class `h3`. Semantic level: first block on page → `<h1>`, otherwise `<h2>`; when embedded → `<h2>`.
- **Body:** Not shown for CTA: Small (body is only used for CTA: Large).

## 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 (h3 for Small) | No heading |
| `body` | RichText | Not displayed for CTA: Small | No visible effect |
| `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: Small" vs "CTA: Large" (size/layout) | N/A |
| `id` | Symbol | Entry id for preview | No visible effect |
| `index` | Number | Affects heading level | N/A |

## Behaviour

- **Size:** "CTA: Small" uses h3, no body in layout, smaller button and margin (my-10). When embedded, content is centred and stacked.
- **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 h3.
- **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 or change first link | CTA button label and URL update |
| Set textColour | Heading uses that palette colour |

## Screenshots to capture

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