# Two column rich text A structured editorial section that splits content across up to three columns — an optional heading (with optional icon) on the left, and up to two independent rich text columns on the right. Used when a topic or section needs a clear label alongside detailed body copy, or when two parallel blocks of rich text need to sit side by side. ## Screenshots | Variant | Preview | |---------|---------| | Default | ![Default](${URL}/cms/screenshot?file=components/two-column-rich-text-default.png) | ## What it looks like The section renders a full-width block with a thin top border and compact vertical padding. On laptop and wider screens, it is divided into three zones laid out as a 12-column grid. The heading occupies the leftmost 4 columns; the primary body text occupies 3 columns starting at column 7; the additional copy occupies 3 columns starting at column 10. On mobile and tablet, all three zones stack vertically at full width. If an icon is present it appears below the heading, separated by padding. The body and additional copy areas support full rich text formatting, including paragraphs, headings, links, lists, and embedded entries. The section has a Light background by default unless a background colour is set. ## Typography - **Heading** — `h2Med` (45px); rendered as `

` when this is the first component on the page, or `

` when it appears further down - **Body** — `p1` (20px); applied to the primary rich text column - **Additional copy** — `p1` (20px); applied to the secondary rich text column - **Icon** — rendered as a fill-less SVG visual, sized by the asset itself ## 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 `Two column rich text` to render this layout. | Required — determines which component renders. | | Heading | Text | Renders a prominent `h2Med` heading in the left 4-column zone on laptop and wider. Its HTML element is `

` if this is the first block on the page, or `

` otherwise. | No heading zone is shown. The body columns (if present) appear without a title. | | Icon | Asset (SVG) | Renders an SVG icon below the heading, displayed with no fill. Only visible if a heading is also present. | No icon is shown. | | Body | Rich text | Renders rich text in the first right-hand column (3 columns wide, starting at column 7 on laptop and wider), styled `p1`. | No body column is shown in that position. | | Additional copy | Rich text | Renders rich text in the second right-hand column (3 columns wide, starting at column 10 on laptop and wider), styled `p1`. | No additional copy column is shown. | | 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**: Any of the three content zones (heading, body, additional copy) that are not populated are simply not rendered. If all three are empty the component renders nothing visible, though the section wrapper with its border and spacing may still be present. - **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 `

`. When it appears further down the page, it renders as `

`. The visual style (`h2Med`) is the same in both cases. - **Icon requires heading**: The icon is placed inside the heading zone. If no heading is provided, the icon is not rendered even if an asset is linked. - **Layout with all three zones**: On laptop and wider, heading occupies columns 1–4, body occupies columns 7–9, and additional copy occupies columns 10–12. There is a deliberate gap between columns 4 and 7. - **Layout with body only**: If only a body is set (no heading, no additional copy), the body column still renders at column-start 7 on laptop, leaving the left zone empty. - **Layout with additional copy only**: If only additional copy is set, it renders at column-start 10 on laptop, leaving both the heading and body zones empty. - **Border and spacing**: A top border always spans the full content width. Vertical padding is compact. The vertical gap between stacked zones is larger on mobile and tablet than on laptop and wider. - **Single variant**: There is only one registered variant — "default". There is no flipped or reversed layout variant. - **Embeddable**: This component can also be embedded inside rich text entries on other components, in which case the heading renders one level lower (`

` at index 0, `

` further down). ## Impact of content changes | Change | Visual result | |--------|---------------| | Add heading | A `h2Med` heading appears in the left 4-column zone on laptop and wider. | | Remove heading | The heading zone is hidden; any icon also disappears. Body and additional copy (if present) remain in their right-hand columns. | | Add icon | An SVG icon appears below the heading. Has no effect if heading is absent. | | Remove icon | No icon is shown beneath the heading. | | Add body | A `p1` rich text column appears in columns 7–9 on laptop and wider. | | Remove body | The body column disappears; the additional copy column (if present) remains at its own column position. | | Add additional copy | A second `p1` rich text column appears in columns 10–12 on laptop and wider. | | Remove additional copy | The second rich text column disappears; the body column (if present) remains at its own position. | | Remove all three content fields | The component renders nothing visible on 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. |