# Feature block: Narrow image left

Same as Feature block: Image left, but the content is **narrower** (10 cols, centred). Copy on the right, visual on the left. Use when you want a more focused feature block.

## What it looks like

Desktop: two columns (flex, reversed so visual is left), constrained to 10 cols starting at col 2. Left: image/video. Right: copy block with optional background and text colour. On smaller breakpoints the layout stacks. 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** only.

**Valid values:** From palette (e.g. Dark, White, Primary Blue, 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 (h6) | No postHeading |
| `body` | RichText | Body copy (p2) | No body block |
| `visual` | EntryLink | Image/video in left column | No visual column |
| `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 | Default colour |
| `componentType` | Symbol | Narrow + Image left layout | N/A |
| `id` | Symbol | Entry id for preview | No visible effect |
| `index` | Number | Affects heading level | N/A |

## Behaviour

- **Layout:** Narrow variant uses `laptop:col-start-2 laptop:col-span-10`. Image left = visual left, copy right (flex-row-reverse).
- **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 |
| Add/remove body/links | Blocks appear or disappear in copy column |
| Set backgroundColour/textColour | Copy block gets that background and text colour |

## Screenshots to capture

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