# Centered quote

A full-width pull-quote block that centres a large quote and attribution on the page. Use it to highlight a key statement, testimonial, or notable phrase between other content sections.

## Screenshots

| Variant | Preview |
|---------|---------|
| Default | ![Default](http://localhost:3012/cms/screenshot?file=components/centered-quote-default.png) |

## What it looks like

The Centered quote renders a single column of text centred both horizontally and vertically within the section. The quote text is displayed in a large `h2` typographic style and is horizontally centred. Below the quote, an optional attribution line appears in smaller `p3` text, prefixed with an em-dash (—). There are no images, icons, or sidebars — only the text itself. The content area has generous vertical padding above and below, creating breathing room around the quote. When a background colour is applied it fills the entire section width.

## Typography

- **Body (quote text)** — `h2` (45 px), centred
- **Post-heading (attribution)** — `p3` (13 px), prefixed with — (em-dash)

## Colours

`backgroundColour` is applied to the full-width section wrapper, setting the background colour for the entire component area. `textColour` is not used by this component type.

Valid palette values for `backgroundColour`:

| Value | Appearance |
|-------|------------|
| `Dark` | Dark (`#1F2E32`) background |
| `Light` | Light (`#FFFDFA`) background |

Leave `backgroundColour` empty to inherit the page default (no background applied).

## Used fields

| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|-----------------|--------------------------|
| `cmsLabel` | Text | Internal label used to identify this entry in Contentful. Not visible on the page. | Required — entry cannot be saved without it. |
| `body` | Rich text | Displays the quote text in a large centred `h2` style. Supports standard rich-text formatting. | No quote text appears; the section is effectively empty. |
| `postHeading` | Text | Displays an attribution line in `p3` text below the quote, automatically prefixed with an em-dash (—). | No attribution line appears. |
| `backgroundColour` | Enum | Applies a section-wide background colour (`Dark` or `Light`). | No background colour applied; the section inherits the page default. |
| `anchor` | Text | Sets the HTML `id` of the section element, enabling deep-link navigation to this block (e.g. `#quote-section`). | No anchor; the section cannot be targeted by a URL fragment. |
| `componentType` | Enum | Must be set to `Centered quote` to use this layout. | Required — the component will not render correctly without it. |

## Behaviour

- **Fixed centred alignment:** The quote text is always horizontally centred and the figure element centres its items in a column layout. This is not configurable via CMS fields.
- **Em-dash prefix on attribution:** When `postHeading` is provided it is automatically prefixed with — (em-dash and a space). Do not manually add an em-dash in the field value.
- **Generous vertical padding:** The component applies substantial vertical padding (both on the outer figure and the inner text container) to give the quote visual prominence. This padding is always present regardless of content length.
- **No heading-level change by position:** Unlike some other components, the Centered quote does not change its heading level based on page position. The quote text always renders at `h2` typographic scale regardless of whether it is the first or last block on the page.
- **Embeddable in rich text:** The component can also appear embedded inline within a rich text field of another component, where it renders without the full-width section wrapper.
- **No visual, links, or icon fields:** This component does not render images, videos, buttons, or icons. Only text content is supported.

## Impact of content changes

| Change | Visual result |
|--------|---------------|
| Add `body` | Large centred quote text appears in the section. |
| Remove `body` | The quote text disappears; the section renders as a padded empty block. |
| Add `postHeading` | An attribution line appears below the quote, prefixed with —. |
| Remove `postHeading` | The attribution line disappears; quote stands alone. |
| Set `backgroundColour` to `Dark` | Entire section background becomes dark (`#1F2E32`). |
| Set `backgroundColour` to `Light` | Entire section background becomes light (`#FFFDFA`). |
| Clear `backgroundColour` | Section has no background colour; inherits the page default. |
| Set `anchor` | The section gains an HTML id, making it reachable via a URL fragment link. |
| Provide very long `body` text | The quote text wraps across multiple lines; vertical padding remains constant. |
| Provide very short `body` text | A brief centred phrase appears with the same generous padding around it. |