# Text Header

Section header / title block without heavy media.

## Screenshots

| Variant | Preview |
|---------|---------|
| Default | ![Default](http://localhost:3023/cms/screenshot?file=components/text-header-default.png) |
| Blue | ![Blue](http://localhost:3023/cms/screenshot?file=components/text-header-blue.png) |
| No Links | ![No Links](http://localhost:3023/cms/screenshot?file=components/text-header-no links.png) |

## What it looks like

Heading level and spacing change when this is the first block on the page (`isFirst` / index 0). Body/copy fields accept rich text and are rendered with the site RTF styles.
 Captured variants in the showcase: `default`, `blue`, `no links`.

Content sits in the site container grid with standard section spacing unless this type opts into custom vertical rhythm.

## Typography

- Primary font family: **DM Sans** (design-system font table).
- Classes observed for this type: `buttonTextOnly`, `h1`, `h2`, `p2`.
- Main section heading uses the sizing information rule: first block on a page often renders as `h1`, later blocks as `h2` (or the component’s own heading element mapping).
- `preHeading` and `postHeading` (when used) are paragraphs, never heading tags.
- Body copy typically uses `p2` / `p3` rich-text styles.
- Button labels use `buttonText` / related button styles via shared link rendering.

## Colours

`backgroundColour` and `textColour` accept palette colour names (not raw hex). Prefer high-contrast pairs.

**Background colour values commonly allowed on components:**
`Blue 1`, `Blue 2`, `Blue 3`, `Bright Green`, `Dark Blue`, `Darkest Blue`, `Gray 3`, `Orange 1`, `Orange 2`, `Orange 3`, `Primary Blue`, `Routewise AI Blue`, `Teal`, `White`, `Yellow`.

**Text colour values (full palette):**
`Blue 1`, `Blue 2`, `Blue 3`, `Blue 4`, `Blue 5`, `Bright Green`, `Button BG Gray`, `Button Text Gray`, `Dark Blue`, `Dark Teal`, `Darker Teal`, `Darkest Blue`, `Gray 1`, `Gray 2`, `Gray 3`, `Gray 4`, `Gray 5`, `Light Orange`, `New/Med Gray`, `Orange 1`, `Orange 2`, `Orange 3`, `Orange 4`, `Pink`, `Primary Blue`, `Primary Light Orange`, `Primary Orange`, `Purple`, `Red-ish`, `Routewise AI Blue`, `Teal`, `White`, `Yellow`.

Some components apply colours section-wide via the shared `Section` wrapper; others (e.g. CTA Banner) apply them to an inner rounded card. Dark backgrounds (e.g. `Darkest Blue`, `Routewise AI Blue`) usually need light text (`White`, `Gray 5`).

## Used fields

| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|-----------------|---------------------------|
| `cmsLabel` (CMS Label) | Symbol | Internal label for CMS/analytics tracking. | Required for authors; no direct on-page visual if unused by tracking. |
| `heading` (Heading) | Symbol | Primary heading text. | Heading omitted; layout may tighten. |
| `showHeading` (Show heading) | Boolean | When false, heading can be suppressed even if filled. | Depends on component — often defaults to showing heading. |
| `componentType` (Component type) | Symbol (enum) | Selects which component renderer to use (must match this type). | N/A — required. |
| `anchor` (Anchor) | Symbol | HTML id for in-page links. | No jump target for this section. |
| `backgroundColour` (Background colour) | Symbol (enum) | Applies section/card background. Valid names include: `Blue 1`, `Blue 2`, `Blue 3`, `Bright Green`, `Dark Blue`, `Darkest Blue`, `Gray 3`, `Orange 1`, …. | Default/transparent site background. |
| `textColour` (Text colour) | Symbol (enum) | Applies text colour. Prefer palette pairs that meet contrast (e.g. `Darkest Blue` on light grounds, `White` on dark grounds). | Default text colour for the background. |
| `preHeading` (Pre-heading) | Symbol | Eyebrow/pre-heading above the main heading (rendered as paragraph, not a heading tag). | No pre-heading line. |
| `postHeading` (Post heading) | Symbol | Supporting line under the heading (paragraph, not a heading tag). | No post-heading line. |
| `body` (Body) | RichText | Main rich-text/body copy. | No body copy region. |
| `icon` (Icon) | AssetLink | Icon visual beside heading/content. | No icon. |
| `links` (Links) | Array | CTA buttons/links. | No CTAs. |
| `visual` (Visual) | EntryLink | Primary image/video visual. | No primary visual; text-only layout. |
| `otherVisuals` (Other visuals) | Array | Additional visuals (gallery/cards). | No extra visuals. |
| `additionalCopy` (Additional copy) | RichText | Secondary rich text region. | No secondary copy. |
| `mobileVisual` (Mobile visual) | EntryLink | Alternate visual for small screens. | Falls back to primary visual. |
| `backgroundVisual` (Background Visual) | AssetLink | Background media behind the section. | No background media. |
| `mobileBackgroundVisual` (Mobile background visual) | AssetLink | Mobile background media. | Falls back to desktop background media or none. |
| `backgroundOverlayOpacity` (Background overlay opacity) | Number | Darkens/tints background media for text contrast. | Default overlay (or none). |
| `otherMedia` (Other media) | Array | Extra media attachments used by specialized modules. | No extra media. |

## Behaviour

- **When to use:** Section header / title block without heavy media.
- **Position / index:** Heading level and section spacing often depend on whether the block is first on the page. Prefer one clear `h1` per page (usually the first content block or dedicated hero).
- **Links:** When `links` are present they render as site-styled CTAs; keep labels short and action-oriented.
- **Visuals:** Supply optimized images; mobile visual overrides apply only on small breakpoints when provided.
- **Accessibility:** Choose text/background pairs with sufficient contrast; for background media heroes, raise overlay opacity if text is hard to read.

## Impact of content changes

| Change | Visual impact |
|--------|---------------|
| Longer heading | May wrap to multiple lines; keep under ~90 characters when possible. |
| Longer body | Increases section height; CTAs may sit further down. |
| Add / remove visual | Toggles media column or icon; text may expand to full width when visual is removed. |
| Add / remove links | Shows or hides CTA row; empty links hide the control. |
| Change backgroundColour | Retints the section or card; verify textColour still contrasts. |
| Change textColour | Retints copy and often inherited link styles inside the coloured region. |
| First vs later on page | First instance may use larger heading level / hero spacing. |