# Callout: Rounded

A content block with optional heading and body, and large rounded corners (rounded-[64px]). Colours are applied to the callout box. Use for soft highlights or feature callouts. Section uses `noBackground`; the inner box uses `backgroundColour` and `textColour`.

## What it looks like

A padded, rounded box (flex flex-col gap-6, px-8 py-10 laptop:px-16 laptop:py-10, rounded-[64px]) with no outer section background. Heading (h4), optional body (p2, rtf-core). Colours apply to this inner box. Single-column layout; visually distinct from Callout due to the rounded corners.

## Typography

- **Main heading:** Typography class `h4`. Semantic level: first block on page → `<h1>`, otherwise `<h2>`.
- **Body:** `rtf-core p2`.

## Colours

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

**Valid values:** backgroundColour and textColour from the design system palette.

## Used fields

| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|-----------------|---------------------------|
| `heading` | Symbol | Main title (h4) | No heading |
| `body` | RichText | Body copy (p2, rtf-core) | No body block |
| `anchor` | Symbol | HTML `id` for in-page linking | No anchor |
| `cmsLabel` | Symbol | Internal/analytics | No visible effect |
| `backgroundColour` | Symbol | Background of rounded box | Default/inherited |
| `textColour` | Symbol | Text colour in box | Default/inherited |
| `componentType` | Symbol | "Callout: Rounded" | 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 rounded content box.

## Impact of content changes

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

## Screenshots to capture

Recommended variants: default, dark-bg, primary-blue-bg, light-bg, minimal.