# Feature block: Image right

A two-column section with **copy on the left** and **visual on the right**. Copy sits in a coloured block; the section has no background. Use for feature highlights with image right.

## What it looks like

Desktop: two columns (flex). Left: copy block (heading, postHeading, body, links) with optional background and text colour; copy block is 6 cols when not circle-mask. Right: image/video (ResponsiveVisual). On smaller breakpoints the layout stacks (copy then visual). If no visual, the copy block remains. Section uses `noBackground`; `backgroundColour` and `textColour` apply to the copy block only.

## Typography

- **Main heading:** Typography class `h3`. Semantic level: first block on page → `<h1>`, otherwise `<h2>`.
- **Post heading:** `h6`.
- **Body:** `p2` with `rtf-standard`.

## Colours

**How colours are applied:** Section has no background (`noBackground`). `backgroundColour` and `textColour` apply to the **copy block** (the left column).

**Valid values:** From palette (e.g. Dark, White, Primary Blue, Gray 1, etc. for backgroundColour; Bright Blue, Dark, Orange, Primary Blue, Purple, Secondary Blue, White for textColour).

## Used fields

| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|-----------------|---------------------------|
| `heading` | Symbol | Main title (h3) | No heading |
| `postHeading` | Symbol | Subheading below main heading (h6) | No postHeading |
| `body` | RichText | Body copy (p2) | No body block |
| `visual` | EntryLink | Image/video in right column | No visual column; copy block remains |
| `links` | Array | Link buttons below body | No links block |
| `anchor` | Symbol | HTML `id` for in-page linking | No anchor |
| `cmsLabel` | Symbol | Internal/analytics | No visible effect |
| `backgroundColour` | Symbol | Background on copy block | No background on copy block |
| `textColour` | Symbol | Text colour for heading and content | Default colour |
| `componentType` | Symbol | Determines layout (Image right = copy left, visual right) | N/A |
| `id` | Symbol | Entry id for preview | No visible effect |
| `index` | Number | Affects heading level | N/A |

## Behaviour

- **Layout:** "Image right" means copy on the left, visual on the right (default flex order). Copy block is 6 cols unless visual has circle mask.
- **Position (index):** First block on page → heading is `<h1>`, else `<h2>` (typography class h3).
- **Animations:** Copy and visual use animate-when-seen.

## Impact of content changes

| Change | Result |
|--------|--------|
| Add/remove visual | Visual column appears or disappears; copy block width unchanged |
| Add/remove body/links | Blocks appear or disappear in copy column |
| Set backgroundColour/textColour | Copy block gets that background and text colour; link button colour follows (white on dark, dark on light) |

## Screenshots to capture

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