# Right aligned quote

A pull-quote component that pushes the quoted text to the right side of the page. Use it to highlight a key statement or attribution in an editorial layout, creating asymmetric visual weight without a full-width interruption.

## Screenshots

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

## What it looks like

The Right aligned quote renders the entire quote block — body text and optional attribution — flush to the right edge of the content area. On laptop-width screens and wider, the content is constrained to the right half of the content column (approximately half the page width). On smaller screens the content spans the full column width. There are no decorative rules or separator lines. The body text is displayed at `p1` size, giving it clear emphasis without being as large as a heading. The optional attribution line appears below the body in smaller `p3` text, preceded by an em dash (—).

## Typography

- **Body (quote text)** — `p1` (20 px)
- **Post-heading (attribution / caption)** — `p3` (13 px), prefixed with an 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 colour 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 main quote text styled at `p1` size, right-aligned within the component. | No quote text appears; the component renders empty (only the attribution line, if set, is visible). |
| `postHeading` | Text | Displays an attribution line below the body, prefixed with an em dash (—), styled at `p3`. Typically used for the speaker's name, role, or source. | No attribution line appears. |
| `backgroundColour` | Enum (`Dark`, `Light`) | Applies a section-wide background colour to the full component area. | No background colour; 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 `Right aligned quote` to use this layout. | Required — the component will not render correctly without it. |

## Behaviour

- **Right-aligned layout:** The quote content is always aligned to the right. On laptop-width screens and wider, the quote occupies only the right half of the content column. On mobile and tablet, it spans the full column width.
- **No index-based heading changes:** Unlike other components, Right aligned quote does not change heading levels based on position on the page. The body text always renders at `p1` regardless of whether this is the first or a later block.
- **Em dash prefix on attribution:** The `postHeading` field always renders with an em dash (—) prepended automatically. Do not add an em dash manually in the field value.
- **Embedded support:** The component can be embedded inside rich text entries. When embedded, the quote spans the full width of its embedding context rather than the page column.
- **Section-wide colour:** When `backgroundColour` is set, the background covers the full page width (not just the right half where the text sits).

## Impact of content changes

| Change | Visual result |
|--------|---------------|
| Add `body` | Quote text appears right-aligned at `p1` size. |
| Remove `body` | No quote text; the component area is effectively blank (unless attribution is set). |
| Add `postHeading` | An attribution line prefixed with — appears below the body at `p3` size. |
| Remove `postHeading` | The attribution line disappears; only the body text remains. |
| Set `backgroundColour` to `Dark` | The full section area gains a dark background. |
| Set `backgroundColour` to `Light` | The full section area gains a light background. |
| 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. |