# Wide quote

A full-width pull-quote component that displays a prominent body text passage and an optional attribution line, separated from surrounding content by a dark horizontal rule. Use it to highlight a key quote or statement on a page.

## Screenshots

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

## What it looks like

The component spans the full content width. A thin dark horizontal rule runs edge-to-edge at the top of the content area, visually separating the quote from the block above it. Below the rule, the body text appears in `p1` size, left-aligned. If an attribution line (`postHeading`) is provided, it appears below the body text in `p3` size, preceded by an em dash (—). The background is transparent by default (the page background shows through), and there is no heading element — the quote text itself is the primary typographic element.

## Typography

- Body text (`body`): `p1`
- Attribution line (`postHeading`): `p3` (preceded by an em dash character)

## Colours

`backgroundColour` and `textColour` apply to the full-width section wrapper, affecting both the body text and the attribution line.

Valid values for both fields:

- `Dark`
- `Light`

When neither field is set the section renders with a transparent background and the text inherits the default page 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 `Wide quote` to use this layout. | Required — controls which component is rendered. |
| `body` | Rich text | The main quote text, displayed in `p1`. Renders as rich text so bold, italic, and links are supported. | The quote text area is omitted entirely; only the rule and any attribution line remain. |
| `postHeading` | Text | An attribution or source line shown below the body in `p3`, prefixed with an em dash (e.g. — Jane Smith). | The attribution line is hidden; the body text is the only visible content. |
| `backgroundColour` | Text (enum: `Dark`, `Light`) | Sets the background colour of the full section. | No background colour is applied; the page background shows through. |
| `textColour` | Text (enum: `Dark`, `Light`) | Sets the text colour for the entire section (body and attribution). | Text inherits the default page colour. |
| `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) | Used internally to track position on the page. Does not change the heading level or typography for this component (no heading is rendered). | 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. |

## Behaviour

- **Horizontal rule is always present.** A full-width dark horizontal rule is rendered at the top of the content area for all Wide quote instances. It cannot be hidden via CMS fields.
- **No heading element.** Unlike most other components, Wide quote does not render a heading. The `body` rich text field serves as the primary typographic element.
- **Attribution prefix.** When `postHeading` is set, the em dash (—) is added automatically in front of the text. Do not include a dash yourself in the field value.
- **Position on page does not change typography.** The body text is always styled `p1` regardless of whether the component appears first or later on the page. There is no `h1`/`h2` heading level switch.
- **Colours are section-wide.** Any `backgroundColour` or `textColour` set in Contentful applies to the entire section including the rule, body text, and attribution line.

## Impact of content changes

| Change | Visual result |
|---|---|
| Add `body` | The quote text appears in `p1` below the horizontal rule. |
| Remove `body` | The text area disappears; only the dark rule and any attribution line are visible. |
| Add `postHeading` | An attribution line appears below the body in `p3`, prefixed with an em dash. |
| Remove `postHeading` | The attribution line disappears; the body text is the last element. |
| Set `backgroundColour` to `Dark` | The entire section background turns Dark; combine with `textColour: Light` for readable text. |
| Set `backgroundColour` to `Light` | The entire section background turns Light. |
| Add `anchor` | A URL fragment can now scroll directly to this quote section. |
| Remove `anchor` | Fragment-link navigation to this block no longer works. |