# Article description
A structured section used within article pages to present a labelled description block, combining a pre-heading label, a main heading, an optional post-heading note, and a rich text body — typically appearing between article hero and body content sections.
## Screenshots
| Variant | Preview |
|---------|---------|
| Default |  |
## What it looks like
The component opens with a full-width horizontal rule that visually separates it from the section above. Below the rule, the content is arranged in two columns on laptop and wider screens: a narrow left column (spanning 4 grid columns) holds the pre-heading and post-heading labels, while a wider right column holds the main heading and body text. On mobile and tablet, both columns stack vertically. The left column labels appear in a compact typographic style, and the right column heading is large and prominent. The body area supports full rich text including paragraphs, lists, and embedded content.
## Typography
- **Pre-heading** — `h4` (16px mobile, 24px desktop), rendered as a `` element
- **Post-heading** — `p2` (16px), rendered as a `
` element
- **Heading** — `h3l` (21px mobile, 44px desktop), rendered as `
` when this is the first component on the page, or `` when it appears later
- **Body** — standard rich text styling, supporting paragraphs, headings, lists, and inline formatting
## Colours
`backgroundColour` is applied to the full-width section wrapper, changing the background and automatically adjusting text contrast. `textColour` is not used by this component.
Valid values for `backgroundColour`:
| Value | Background | Text contrast |
|-------|-----------|---------------|
| `Dark` | `#1F2E32` | Light text |
| `Light` | `#FFFDFA` | Dark text |
When `backgroundColour` is not set, the section inherits the page background.
## Used fields
| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|-----------------|--------------------------|
| CMS Label | Text | Internal label for finding this entry in Contentful. Not shown on the page. | Required — entry cannot be saved without it. |
| Component type | Text (enum) | Must be set to `Article description` to render this layout. | Required — determines which component renders. |
| Heading | Text | Renders as the large heading in the right column, styled `h3l`. Its HTML element is `` if this is the first block on the page, or `` otherwise. | No heading is shown. If no other content fields are set either, the entire component is hidden. |
| Pre-heading | Text | Renders above the post-heading in the left column, styled `h4`. | Left column is shorter or empty if post-heading is also absent. |
| Post heading | Text | Renders below the pre-heading in the left column, styled `p2`. | No visible effect when empty if pre-heading is also absent; left column may collapse. |
| Body | Rich text | Renders as the main descriptive content in the right column below the heading, supporting paragraphs, lists, and embedded entries. | No body block is shown. Content ends after the heading. |
| Background colour | Text (enum) | Sets the background of the full section to `Dark` or `Light`, with matching text contrast applied automatically. | Section inherits the surrounding page background. |
| Anchor | Text | Adds an `id` attribute to the section element, enabling deep-linking to this block via URL hash (e.g. `#my-anchor`). | No anchor is set; the section cannot be directly linked. |
## Behaviour
- **Empty state**: If none of heading, pre-heading, post-heading, or body are provided, the component renders nothing — it is completely hidden from the page.
- **Position / index**: The heading HTML element changes based on where this component appears in the page. When it is the first component (index 0), the heading renders as ``. When it appears further down the page, it renders as ``. The visual style (`h3l`) is the same in both cases.
- **Embedded usage**: This component can also be embedded inside rich text entries on other components. When embedded, the same position rules apply — the heading renders as `` if it is the first item (index 0) or `` otherwise — and it fills the width of its container rather than a full page section.
- **Single variant**: There is only one variant — "default". There are no flipped, dark, or light variant options beyond the `backgroundColour` field.
## Impact of content changes
| Change | Visual result |
|--------|---------------|
| Add pre-heading | A label line appears at the top of the left column in `h4` style. |
| Remove pre-heading | The label disappears; if post-heading is also absent, the left column appears empty. |
| Add post-heading | A smaller note appears below the pre-heading (or alone) in the left column in `p2` style. |
| Remove post-heading | The note disappears from the left column. |
| Add heading | A large `h3l` heading appears in the right column. |
| Remove heading | No heading is shown; body text (if present) appears without a title above it. |
| Add body | Rich text content fills the right column below the heading. |
| Remove body | No body block is shown; the right column contains only the heading. |
| Remove all content fields | The entire component is hidden from the page. |
| Set background colour to Dark | The section background changes to dark (`#1F2E32`); text becomes light automatically. |
| Set background colour to Light | The section background changes to off-white (`#FFFDFA`); text becomes dark automatically. |
| Clear background colour | The section inherits the page background (no explicit colour applied). |
| Add anchor | The section gains an `id` attribute, enabling URL hash linking. |