# Callout

A content block with optional heading, post-heading, and body. Colours are applied to the callout box (not the full-width section). Use for highlights, quotes, or short editorial asides. Section uses `noBackground`; the inner box uses `backgroundColour` and `textColour`.

## What it looks like

A padded box (flex flex-col gap-6, px-8 py-10 laptop:px-16 laptop:py-10) with no outer section background. Heading (h2), optional post-heading (h6), and rich-text body (rtf-standard). Colours apply to this inner box via the palette. Layout is single-column; content stacks vertically.

## Typography

- **Main heading:** Typography class `h2`. Semantic level: first block on page → `<h1>`, otherwise `<h2>`.
- **Post-heading:** Rendered as `<p>` with class `h6` (not a heading tag).
- **Body:** `rtf-standard` (no extra p class in source; rich text uses standard RTF styling).

## Colours

**How colours are applied:** Section has `noBackground`. The inner callout div uses `lookupColourClassNames(backgroundColour, textColour)` — so background and text colour apply to the callout box only.

**Valid values:** backgroundColour and textColour from the design system palette (e.g. Bright Blue, Dark, Gray 1, Light, Primary Blue, White; 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 (h2) | No heading |
| `postHeading` | Symbol | Subtitle line (h6) below heading | No post-heading line |
| `body` | RichText | Body copy (rtf-standard) | No body block |
| `anchor` | Symbol | HTML `id` for in-page linking | No anchor |
| `cmsLabel` | Symbol | Internal/analytics | No visible effect |
| `backgroundColour` | Symbol | Background of callout box | Default/inherited |
| `textColour` | Symbol | Text colour in callout box | Default/inherited |
| `componentType` | Symbol | "Callout" | N/A |
| `id` | Symbol | Entry id for preview | No visible effect |
| `index` | Number | Affects heading level | N/A |

## Behaviour

- **Position (index):** First block on page → heading is `<h1>`, else `<h2>`.
- **Section:** Section wrapper has `noBackground`; all colour is on the inner content box.

## Impact of content changes

| Change | Result |
|--------|--------|
| Add/remove heading | Heading appears or disappears |
| Add/remove postHeading | Post-heading line appears or disappears |
| Add/remove body | Body block appears or disappears |
| Set backgroundColour / textColour | Callout box background and text use palette colours |

## Screenshots to capture

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