# Article rich text

A long-form article content section used for editorial pages. Renders a heading, optional pre- and post-heading labels, a rich text body with a right-aligned column layout, an optional image or video, call-to-action links, and additional copy below the links.

## Screenshots

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

## What it looks like

The component spans the full container width inside a section with top and bottom spacing. In the default variant, the heading appears in the left-hand area of the section in large display type (`h1` class, 96px mobile / up to 200px on desktop). The rich text body sits in a right-aligned column, creating a classic editorial two-zone appearance where the heading anchors the left and the body flows down the right. No background colour is applied by default, so the section sits on the page background.

When an icon is provided it appears above the pre-heading as a small SVG. Pre-heading and post-heading labels sit directly above and below the main heading respectively in smaller body text. The visual (image or video) appears between the post-heading and the body. Call-to-action links render as buttons below the body. Additional copy follows the links in standard rich text styling.

## Typography

- Pre-heading — `p2` (16px)
- Heading — `h1` class (96px mobile, up to 200px desktop); HTML element is `<h1>` when the block is first on the page, `<h2>` for all subsequent positions
- Post-heading — `p2` (16px)
- Body (main rich text) — article editorial rich text styling; right-aligned column layout when standalone
- Additional copy — standard rich text styling

## Colours

`backgroundColour` and `textColour` are applied to the full-width section wrapper, affecting all content (heading, body, links) within the block.

**Valid background colours:** `Dark`, `Light`

**Valid text colours:** `Dark`, `Light`

When `backgroundColour` is set to `Dark`, the call-to-action link buttons automatically switch to white button style. When `backgroundColour` is `Light` or unset, buttons use the dark button style.

## Used fields

| Field | Type | Effect when set | Effect when empty/removed |
|---|---|---|---|
| `cmsLabel` | Text | Internal Contentful name for finding this entry. Not visible on the page. | Required — entry cannot be saved without it. |
| `anchor` | Text | Adds an HTML `id` to the section element, enabling deep-links to this section. | No anchor; the section cannot be linked to directly. |
| `backgroundColour` | Enum (`Dark`, `Light`) | Sets the section background and text colour scheme. `Dark` also switches link buttons to white. | Section uses the page default background; buttons use dark style. |
| `textColour` | Enum (`Dark`, `Light`) | Overrides the text colour for all text within the section. | Text colour follows the default for the background. |
| `heading` | Text | Displays the section heading in the `h1` typography class. Renders as `<h1>` or `<h2>` depending on position. | No heading is shown. |
| `preHeading` | Text | Short label displayed above the heading in `p2` style. | No pre-heading label appears. |
| `postHeading` | Text | Short label displayed below the heading in `p2` style. | No post-heading label appears. |
| `body` | Rich text | Main editorial body rendered in a right-aligned column layout. Supports headings, paragraphs, lists, bold, links, and embedded entries. When embedded in another rich text, the right-alignment is removed. | No body text is shown. |
| `visual` | Media entry | An image or video shown between the post-heading and the body, spanning the full content width. | No image or video is shown. |
| `links` | Links array | Call-to-action buttons rendered below the body. Button colour is white on dark backgrounds, dark on light backgrounds. | No buttons are shown. |
| `additionalCopy` | Rich text | Secondary rich text block rendered below the links in standard rich text styling. | No additional copy is shown. |
| `icon` | Asset (SVG) | Small icon displayed above the pre-heading, sized to 2 columns (mobile) or 1 column (laptop). | No icon is shown. |

## Behaviour

- **Heading level by position:** When this is the first block on the page (index 0), the heading renders as an `<h1>` element. For all subsequent positions it renders as `<h2>`. The typography class (`h1`) and visual size remain the same regardless of position.
- **Body alignment:** When the component is used as a standalone page section, the body is offset into a right-aligned column (article editorial layout). When this component is embedded inside another rich text entry, the right-alignment is removed and the body flows full-width.
- **Link button colour:** Button colour adapts automatically to the background. A dark background (`Dark`) produces white buttons; any other background produces dark buttons.
- **Section spacing:** The section uses the standard container row-6 grid with top and bottom spacing. Spacing can be affected by whether the section is the first or last on the page.

## Impact of content changes

| Change | Visual impact |
|---|---|
| Add `heading` | Large display heading appears on the left of the section. |
| Remove `heading` | No heading; pre-heading and post-heading (if set) remain but float without a visual anchor. |
| Add `preHeading` | Small `p2` label appears directly above the heading. |
| Add `postHeading` | Small `p2` label appears directly below the heading. |
| Add `visual` | An image or video block appears between the post-heading and the body, full-width within the content area. |
| Remove `visual` | The body starts immediately after the post-heading (or heading). |
| Add `links` | Call-to-action buttons appear below the body text. |
| Remove `links` | No buttons; additional copy (if set) follows immediately after the body. |
| Add `additionalCopy` | A secondary rich text block appears below the buttons. |
| Add `icon` | An SVG icon appears at the top of the block above the pre-heading. |
| Set `backgroundColour` to `Dark` | The entire section background becomes dark, text inverts to light, and link buttons switch to white. |
| Set `backgroundColour` to `Light` | The entire section background becomes light with dark text and dark buttons. |
| Set very long `body` | The right-aligned body column grows vertically; the heading remains anchored at the top left. |