# Article listing hero

A listing hero that shows a category tag (preHeading), title, and body with an optional featured image. Title and body can come from the component or from the page context (article, tag, article type). Use on article listing pages.

## What it looks like

(Visual description estimated from code; no screenshots available.)

Full-width row: left side is a coloured copy block (preHeading tag, heading h3, body p1); right side is an optional square featured image. The copy block uses `backgroundColour` and `textColour` from the palette. Layout is two columns: copy grows with padding; image is fixed width (e.g. 2 cols, aspect-square). If no image is set, only the copy block is shown.

## Typography

- **Pre-heading (tag):** Rendered as a category tag (pill/label).
- **Heading:** Typography class `h3`.
- **Body:** `p1` with class `rtf-standard`.

## Colours

**How colours are applied:** `backgroundColour` and `textColour` are applied to the **copy block** (the left column), not the full section. The copy block uses the palette for background and text colour.

**Valid `backgroundColour` values:** Bright Blue, Dark, Gray 1, Gray 2, Green, Inactive Gray, Light Blue, Light Orange, Light Purple, Light, Orange, Primary Blue, Purple, Secondary Blue, White, Yellow.

**Valid `textColour` values:** Bright Blue, Dark, Orange, Primary Blue, Purple, Secondary Blue, White.

## Used fields

| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|-----------------|---------------------------|
| `preHeading` | Symbol | Category tag above heading | No tag; heading is first |
| `heading` | Symbol | Main title (h3) | Falls back to page context title if available |
| `body` | RichText | Body copy (p1) | Falls back to page context description if available |
| `visual` | EntryLink | Featured image on the right | Falls back to article/tag/type featured image if available |
| `anchor` | Symbol | HTML `id` for in-page linking | No anchor |
| `cmsLabel` | Symbol | Internal label | No visible effect |
| `backgroundColour` | Symbol | Background of copy block | No background on copy block |
| `textColour` | Symbol | Text colour in copy block | Inherited |

**Behaviour note:** If neither component nor page context provides title or body, the component shows a render error (missing title or body).

## Behaviour

- **Page context:** Title and body can come from the page context (article, tag, article type, or custom type) when component fields are empty. Featured image similarly falls back to the listing's featured image.
- **Section:** Uses `noBackground`; grid is `container-row-1-6` through `container-row-6-12` (laptop). Content is a single full-width flex row.

## Impact of content changes

| Change | Result |
|--------|--------|
| Set preHeading | Category tag appears above heading |
| Set heading / body | Used unless page context overrides |
| Set visual | Image shown or used as override over context image |
| Set backgroundColour / textColour | Copy block gets that background and text colour |
| Remove title and body (and no context) | Component shows error state |

## Screenshots to capture

Recommended variants: default, no-visual, no-preHeading, dark-background, minimal.