# Person hero

A hero block that displays a person’s photo, name, and job title. Content is driven by the **person** page context (e.g. person page); component fields are not used for copy. Use on person/profile pages.

## What it looks like

(Visual description estimated from code; no screenshots available.)

Horizontal row: left side is a circular person image (aspect-square, rounded-full, optional background); right side is a coloured copy block with the person’s title (h1) and job title (h3). The copy block uses `backgroundColour` and `textColour`. If person or required fields are missing, an error state is shown.

## Typography

- **Title (person name):** Typography class `h1`.
- **Job title:** Typography class `h3`.

## Colours

**How colours are applied:** `backgroundColour` and `textColour` are applied to the **copy block** (the right column), not the full section. The copy block uses the palette for background and text colour; the section has no background.

**Valid `backgroundColour` values:** Bright Blue, Dark, Gray 1, Gray 2, Green, Inactive Gray, Light Blue, Light Orange, Light Purple, Light, Orange, Primary Blue, Purple, Secondary Blue, White, Yellow.

**Valid `textColour` values:** Bright Blue, Dark, Orange, Primary Blue, Purple, Secondary Blue, White.

## Used fields

| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|-----------------|---------------------------|
| `anchor` | Symbol | HTML `id` for in-page linking | No anchor |
| `cmsLabel` | Symbol | Internal label | No visible effect |
| `backgroundColour` | Symbol | Background of copy block | No background on copy block |
| `textColour` | Symbol | Text colour in copy block | Inherited |

**Data source:** The visible content (title, job title, featured image) comes from the person in the page context, not from component fields. The component shows an error if `person` is missing or if `title` or `featuredImage` is missing.

## Behaviour

- **Person context:** Requires the person in the page context with title and featured image. Job title is optional. No fallback to component heading/body.
- **Layout:** Flex row; image is shrink-0 (max-laptop: 2 cols, laptop: 4 cols), copy block grows with padding.
- **Section:** Uses `noBackground`; no custom sectionClassName.

## Impact of content changes

| Change | Result |
|--------|--------|
| Person has title + featuredImage | Hero renders with name and image |
| Person missing or missing title/featuredImage | Error indicator shown |
| Set backgroundColour / textColour | Copy block background and text colour update |

## Screenshots to capture

Recommended variants: default (person with image), dark-background. Note: component is `showcaseExclude: true`; screenshots require a person page or equivalent context.