# Generic

A flexible, full-width content block that stacks any combination of icon, pre-heading, heading, post-heading, visual, body text, links, and additional copy in a single column. Use it when no other specialised layout fits the content needs.

## Screenshots

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

## What it looks like

The Generic component renders its content in a single full-width column. Elements stack vertically in a fixed order: icon (if provided), pre-heading, heading, post-heading, visual, body rich text, call-to-action links, and additional copy. Every element is optional — the component renders only those that are supplied. There are no side-by-side columns; all content spans the full content area. The background fills the entire section width when a background colour is applied.

## Typography

- **Pre-heading** — `p2` (16 px)
- **Heading** — styled with the `h1` typography class; rendered as an `<h1>` HTML element when this is the first block on the page, or as an `<h2>` for every subsequent block
- **Post-heading** — `p2` (16 px)
- **Body / Additional copy** — rich text with standard paragraph styles (`rtf-standard`)

## Colours

`backgroundColour` is applied to the full-width section wrapper, setting the background colour for the entire component area. This is the only colour field used by Generic; `textColour` is not an active field for this component type.

Valid palette values for `backgroundColour`:

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

When `backgroundColour` is set to `Dark`, call-to-action buttons switch to white style. When it is set to `Light` or left empty, buttons use the dark style. 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. |
| `heading` | Text | Displays a heading styled as `h1` (or `h2` for later blocks on the page). | No heading appears; the pre-heading and post-heading render without a heading between them. |
| `preHeading` | Text | Displays a small line of `p2` text above the heading. | No pre-heading line appears. |
| `postHeading` | Text | Displays a small line of `p2` text immediately below the heading. | No post-heading line appears. |
| `body` | Rich text | Displays the main body content below the visual. Supports standard rich-text formatting. | No body block appears. |
| `additionalCopy` | Rich text | Displays a second block of rich text below the links. | No additional copy appears. |
| `visual` | Image / Video entry | Displays a responsive image or video between the post-heading and the body. The visual is prioritised for loading when this is the first block on the page. | No visual appears; body follows directly after the heading/post-heading. |
| `links` | Array of links | Displays call-to-action buttons below the body. Button style is white on dark backgrounds, dark on light backgrounds. | No link buttons appear. |
| `icon` | Asset (SVG) | Displays a small icon above the pre-heading. Rendered without fill colour (`fill-none`), sized to 2 columns on mobile and 1 column on laptop. | No icon appears. |
| `backgroundColour` | Enum | Applies a section-wide background colour (`Dark` or `Light`). Also controls button colour. | 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. `#contact-section`). | No anchor; the section cannot be targeted by a URL fragment. |
| `componentType` | Enum | Must be set to `Generic` to use this layout. | Required — the component will not render correctly without it. |

## Behaviour

- **Heading element by position:** When Generic is the first content block on the page (index 0), the heading renders as an `<h1>` HTML element. For every block that follows (index 1 or greater), it renders as `<h2>`. This ensures correct heading hierarchy for SEO and accessibility without requiring manual configuration.
- **Button colour from background:** The link buttons automatically switch between dark and white styles based on whether `backgroundColour` is a dark palette value. No manual override is needed.
- **Element order is fixed:** The vertical stacking order is always: icon → pre-heading → heading → post-heading → visual → body → links → additional copy. Individual elements can be omitted but their order cannot be rearranged.
- **Full-width content:** All child elements span the full content column. There is no multi-column sub-layout within Generic.
- **Image loading priority:** When Generic appears as the first block on the page, its visual is marked as a high-priority image to improve page load performance (largest contentful paint).

## Impact of content changes

| Change | Visual result |
|--------|---------------|
| Add `heading` | A large heading appears between pre-heading and post-heading. |
| Remove `heading` | The heading disappears; pre-heading and post-heading (if present) render adjacently. |
| Add `visual` | A responsive image or video appears between the post-heading and body. |
| Remove `visual` | The image/video disappears; body follows directly after the heading block. |
| Add `preHeading` | A small line of text appears above the heading. |
| Remove `preHeading` | The eyebrow line disappears; heading moves to the top of the text stack. |
| Add `postHeading` | A small line of text appears directly below the heading. |
| Remove `postHeading` | No line between heading and visual/body. |
| Add `body` | Rich text content appears below the visual. |
| Remove `body` | The body block disappears; links follow directly after the visual (or heading if no visual). |
| Add `additionalCopy` | A second rich text block appears at the bottom, after the links. |
| Remove `additionalCopy` | The additional copy block disappears; links are the final element. |
| Add `links` | One or more call-to-action buttons appear below the body. |
| Remove `links` | No buttons appear; additional copy (if any) follows body directly. |
| Add `icon` | A small SVG icon appears at the very top of the block, above the pre-heading. |
| Remove `icon` | The icon disappears; pre-heading (or heading) becomes the first visible element. |
| Set `backgroundColour` to `Dark` | Entire section background becomes dark; text and buttons switch to light/white variants. |
| Set `backgroundColour` to `Light` | Entire section background becomes light; text and buttons use dark variants. |
| 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. |