# Left aligned paragraph

A full-width rich text section with an optional heading, used to present editorial or descriptive content with body text flowing left-aligned across the full content area. Typically used for contact details, addresses, long-form copy, or any prose content that does not need a visual or multi-column layout.

## Screenshots

| Variant | Preview |
|---------|---------|
| Default | ![Default](http://localhost:3012/cms/screenshot?file=components/left-aligned-paragraph-default.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. The body area supports full rich text — paragraphs, links with arrow-style formatting, address blocks, lists, and embedded entries. Text is left-aligned throughout. 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.

## 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, supporting paragraphs, headings, links, lists, and embedded content; text flows left-aligned

## 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 `Left 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, left-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.
- **Single variant**: There is only one registered variant — "default". The corresponding "Right aligned paragraph" type uses the same fields but renders the body text right-aligned.
- **Left alignment**: Unlike "Right aligned paragraph", the body text in this component is always rendered left-aligned. This is fixed by the component type — there is no CMS field to change text alignment.

## 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 | Left-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. |