# Content block: Image left

A two-column section with the **image on the left** and copy (heading, postHeading, body, links) on the right. No section background; optional background/text colour on the visual card only.

## What it looks like

Desktop: two columns (flex). Left column: visual(s) in a card that can have a background colour. Right column: copy (heading, postHeading, body, links). On smaller breakpoints the layout stacks (copy then visual). If no visual, the copy area remains. The section uses `noBackground` so the section itself has no fill; `backgroundColour` and `textColour` apply only to the visual card (rounded-card) when set.

## Typography

- **Main heading:** Typography class from sizing (first block → h1, else h2). Embedded: `h2`.
- **Post heading:** `h6`.
- **Body:** `p2` with `rtf-standard` and `rtf-core`.

## Colours

**How colours are applied:** The section has no background (`noBackground`). `backgroundColour` and `textColour` apply to the **visual card** (the wrapper around the image), not the full section. If set, the card gets the palette background and text colour.

**Valid values:** From palette (e.g. Dark, White, Primary Blue, etc.).

## Used fields

| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|-----------------|---------------------------|
| `heading` | Symbol | Main title | No heading |
| `postHeading` | Symbol | Subheading below main heading | No postHeading |
| `body` | RichText | Body copy (p2) | No body block |
| `visual` | EntryLink | Image/video in left column | No visual column; copy remains |
| `otherMedia` | Array | Additional visuals in same column | Only primary visual shown |
| `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 |
| `textColour` | Symbol | Text colour (heading/card) | Default colour |
| `backgroundColour` | Symbol | Background on visual card | No card background |

## Behaviour

- **Layout:** Image left, copy right (laptop:flex-row-reverse so visual column is first in DOM). Copy column laptop:w-cols-4, visual column laptop:w-cols-5.
- **Position (index):** Heading level from getSizingInformation(index). Embedded uses h2 for heading.

## Impact of content changes

| Change | Result |
|--------|--------|
| Add/remove visual | Visual column appears or disappears; copy column unchanged |
| Add/remove body/links | Blocks appear or disappear in copy column |
| Set backgroundColour/textColour | Visual card gets that background and text colour |

## Screenshots to capture

Recommended variants: default, no-visual, no-links, dark-bg (card colour), minimal (heading + visual only).