# Article hero

The hero component for article, tag, and article-type pages. It displays the article title, optional client/subtitle line, article summary, and featured image. Use it as the first block on any article detail page.

## Screenshots

| Variant | Preview |
|---------|---------|
| Default | ![Default](${URL}/cms/screenshot?file=components/article-hero-default.png) |

> Note: The screenshot above was captured in the component showcase without an article page context. In production the component renders correctly when placed on an article page, where it reads the title, summary, and featured image from the page context.

## What it looks like

The component is divided into two rows. The upper row uses a 12-column grid split into two equal halves: the left half (6 columns) shows the client/subtitle line (`postHeading`) in `h2Med` weight, and the right half (6 columns) — offset to column 7 — shows the article title followed by the article summary. Below both text columns, the featured image spans the full 12 columns at a card aspect ratio with rounded corners.

On mobile all columns collapse to full width, stacking the subtitle, title, summary, and image vertically.

A full-width dark horizontal rule separates the navigation from the hero content at the top of the section.

## Typography

- Client / subtitle line (`postHeading`): `h2Med`
- Article title (`heading` / page-context title): styled with `p1Med` (the exact HTML element is `h1` when this is the first block on the page, or `h2` when it appears later)
- Article summary: standard rich-text body styles (`rtf-standard`)

## Colours

`backgroundColour` is not used by this component — the section always renders with a transparent background. The page background shows through.

`textColour` applies to the client/subtitle line only. Valid values:

- `Dark`
- `Light`

When `textColour` is empty the subtitle text inherits the default page text colour.

## Used fields

| Field | Type | Effect when set | Effect when empty / removed |
|---|---|---|---|
| `cmsLabel` | Text | Internal Contentful label. Not visible on the page. | Required — entry cannot be saved without it. |
| `componentType` | Text (enum) | Must be `Article hero` to use this layout. | Required — controls which component is rendered. |
| `heading` | Text | Used as the article title when no article page context is available (fallback). | The component falls back to the title from the linked article, tag, or article-type page context. If neither is present the component displays an error indicator and renders nothing. |
| `postHeading` | Text | Displayed as the client / subtitle line above the title column, styled `h2Med`. When a linked article provides a subtitle that takes precedence over this field. | The client/subtitle line is hidden entirely. |
| `visual` | Entry link (Responsive Visual) | Used as the hero image when no featured image is provided by the article/tag/article-type page context. | The component falls back to the featured image from the page context. If neither is set no image is shown and the image row is omitted. |
| `textColour` | Text (enum: `Dark`, `Light`) | Sets the text colour of the client/subtitle line only. | The subtitle inherits the default page text colour. No visible effect on any other element. |
| `anchor` | Text | Adds an HTML `id` to the section so the page can be deep-linked to this block. | No anchor is set; the section cannot be targeted by fragment links. |
| `index` | Number (auto) | Determines the HTML heading level of the title (`h1` for index 0, `h2` for index > 0) and image priority loading. | Set automatically by the page renderer — do not set manually. |
| `id` | Text (auto) | Internal entry identifier used by the preview system. | Set automatically — do not set manually. |
| `preHeading` | Text | Declared as a used field for compatibility but not rendered in the current implementation. | No visible effect. |
| `body` | Rich text | Declared as a used field for compatibility but not rendered in the current implementation. | No visible effect. |

## Behaviour

- **Page context is the primary data source.** The component reads the article title, summary, and featured image from the page it is placed on (article detail, tag, or article-type page). The `heading`, `postHeading`, and `visual` CMS fields serve as fallbacks when no page context is available, for example when previewing the component in isolation.
- **Heading level depends on position.** When this is the first block on the page (`index = 0`) the title renders as an `<h1>` element. When it appears after other blocks it renders as `<h2>`.
- **Image priority loading.** When the component is the first block (`index = 0`) the featured image is loaded with high priority (eager loading), which improves the Largest Contentful Paint score.
- **Missing title = error state.** If neither the page context nor the `heading` fallback provides a title, the component renders a visible error indicator instead of the hero layout. This should not occur on a correctly configured article page.
- **No background colour.** The section always renders without a background colour regardless of any colour fields set in Contentful — the page background shows through.
- **View transition.** When navigating from an article listing page, the featured image participates in a browser view transition (animated morph) using the article slug as the transition name.

## Impact of content changes

| Change | Visual result |
|---|---|
| Add / change `heading` | Updates the displayed title only when no article page context exists (fallback scenario). On a live article page the article title is used instead. |
| Remove `heading` | No change on a live article page. In a standalone preview the error state is shown if no page context supplies a title. |
| Add `postHeading` | The client/subtitle line appears above the title column in `h2Med`. |
| Remove `postHeading` | The entire subtitle line disappears; the title column starts directly. |
| Add `visual` | The hero image is shown when no page-context featured image is set. |
| Remove `visual` | The hero falls back to the article/tag/article-type featured image. If that is also absent, the image row is omitted entirely. |
| Set `textColour` to `Light` | The subtitle (`postHeading`) text turns light-coloured. Use on dark backgrounds. |
| Set `textColour` to `Dark` | The subtitle text turns dark-coloured. Use on light backgrounds. |
| Add `anchor` | A URL fragment can now scroll directly to this hero section. |
| Remove `anchor` | Fragment-link navigation to this block no longer works. |