# Right aligned paragraph

A full-width rich text section with an optional heading, used to present editorial or descriptive content with body text aligned to the right side of the content area. Use this when you want body copy to flow from the right column — creating an asymmetric layout that pairs well with left-side visual whitespace or sticky navigation anchors.

## Screenshots

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

## What it looks like

The section has a Light background by default. On laptop and wider screens, the optional heading appears in the right half of the grid (spanning 6 of the 12 columns, starting at column 7), styled prominently at `h2Med` size. Below the heading, the body text spans the full content width but is rendered with right-aligned article styling — paragraphs, links, and embedded entries flow toward the right side of the content area. On mobile and tablet, heading and body stack vertically at full width. The section is sticky-positioned with a z-index that keeps it below other overlapping sections during scroll. The dark variant shows a dark background with light text, while the gray variant shows a warm gray background.

## Typography

- **Heading** — `h2Med` (45px) combined with `p1Med` (20px) spacing class; rendered as `<h1>` when this is the first component on the page, or `<h2>` when it appears further down
- **Body** — standard `rtf-article` rich text styling with right-aligned layout (`rtf-article-right`), supporting paragraphs, headings, links, lists, and embedded content

## 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 surrounding 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 `Right aligned paragraph` to render this layout. | Required — determines which component renders. |
| Heading | Text | Renders as a prominent heading in the right 6 columns of the grid on laptop and wider, styled `h2Med`. Its HTML element is `<h1>` if this is the first block on the page, or `<h2>` otherwise. | No heading is shown. The body (if present) appears without a title. |
| Body | Rich text | Renders as the main content spanning the full content width, right-aligned, supporting paragraphs, links, lists, and embedded entries. | No body block is shown. If heading is also absent, the component renders nothing. |
| 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. `#contact-section`). | No anchor is set; the section cannot be directly linked. |

## Behaviour

- **Empty state**: If neither heading nor body is 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 `<h1>`. When it appears further down the page, it renders as `<h2>`. The visual style (`h2Med`) is the same in both cases.
- **Heading column position**: On laptop and wider screens, the heading sits in the right half of the grid (columns 7–12). The body text always spans the full content width regardless of whether a heading is present.
- **Sticky positioning**: The section is sticky during scroll, sitting just below the navigation bar, with a z-index that places it behind other overlapping sticky sections. This is a layout behaviour that cannot be changed via CMS fields.
- **Right alignment**: Unlike "Left aligned paragraph", the body text in this component is always rendered right-aligned. This is fixed by the component type — there is no CMS field to change text alignment.
- **Single variant**: There is only one registered variant — "default". The corresponding "Left aligned paragraph" type uses the same fields but renders the body text left-aligned.

## Impact of content changes

| Change | Visual result |
|--------|---------------|
| Add heading | A large `h2Med` heading appears in the right 6 columns on laptop and wider. |
| Remove heading | No heading is shown; body text (if present) appears without a title. |
| Add body | Right-aligned rich text content fills the full content width below (or in place of) the heading. |
| Remove body | No body block is shown; if heading is also absent the section is hidden entirely. |
| Remove both heading and body | The 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 directly to this block. |