# Article hero

Article hero is a two-column section used on article pages: copy (category tag, heading, author/date and optional additional copy) on the left and an optional featured image on the right. Title and visual can come from the article, tag, or article type when not set on the component. Use for the top of article or tag pages.

## What it looks like

- **Default:** Left column shows a category tag (e.g. article type), main heading (h3 typography), and author row (optional icon, postHeading, additionalCopy). Right column shows the featured image in a rounded-card aspect. Copy block has optional background and text colour from the palette. Section uses no section-wide background.
- **No visual:** Copy only; no image column. Copy block spans the available width.
- **Dark background:** Copy block uses Dark background and White text from the palette.
- **Minimal:** Category tag and heading only; no author row, no visual.

## Typography

- **Heading:** Typography class `h3` from sizingInformation. Semantic level: first block on page → `<h1>`, otherwise `<h2>`.
- **Post-heading and additional copy:** PostHeading uses `h5` and `text-primary-blue`; additionalCopy uses `p3 text-dark`.

## Colours

**How colours are applied:** `backgroundColour` and `textColour` are applied to the **copy block** (left column) only. The section uses `noBackground`. Valid values come from the site palette.

**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 | Shown as category tag when article context provides it | Tag hidden if no article/tag/type |
| `heading` | Symbol | Main title; overridden by article/tag title when in article context | Fallback to article/tag/customType title; error if none |
| `body` | RichText | Not rendered in this component | No effect |
| `visual` | EntryLink | Featured image on the right | Uses article/tag/type featured image if set; else no visual |
| `icon` | AssetLink | Author avatar in author row | No avatar |
| `postHeading` | Symbol | Author/date line in author row | No postHeading line |
| `additionalCopy` | RichText | Extra copy in author row | No additional copy |
| `anchor` | Symbol | HTML `id` for linking | No anchor |
| `cmsLabel` | Symbol | Internal label | No visible effect |
| `backgroundColour` | Symbol | Copy block background | Default background |
| `textColour` | Symbol | Copy block text colour | Inherited |

## Behaviour

- **Article context:** When used on an article/tag/customType page, title can come from article, tag, or articleType; visual from article featuredImage, tag featuredImage, or articleType featuredImage. Component shows an error if there is no title from any source.
- **Position (index):** Heading semantic level follows index (first block → h1, else h2). Typography class is always h3.
- **Section:** Section has no background. Grid is container-row-1-6 and 6-6 (laptop: 1-12 and 6-12).

## Impact of content changes

| Change | Result |
|--------|--------|
| Add/remove visual | Image column appears or disappears; copy block width unchanged on laptop |
| Set backgroundColour / textColour | Copy block background and text colour update |
| Add/remove icon, postHeading, additionalCopy | Author row shows or hides those elements |
| Remove heading (and no article title) | Error indicator shown |

## Screenshots to capture

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