# Person hero
A centered hero section that displays person information with a circular profile image, name, and bio, pulling content from page context or fallback fields.

## Screenshots

| Variant | Preview |
|---------|---------|
| default | ![default](http://localhost:3016/cms/screenshot?file=components%2Fperson-hero-default.png) |

## What it looks like
Single centered column layout (laptop: columns 4-6 of 12) with circular profile image above text content. Image is fixed 169px diameter with rounded border. Text content stacked below with heading and body copy in separate containers with defined spacing.

## Typography
- Heading uses dynamic element based on section index: h1 for first section, h2 for subsequent sections
- Heading styling determined by `textSize` field through `getSizingInformation`: Small uses `h3` class, Medium uses `h2` class, Large uses `h1` class
- Body content rendered through `RtfOrString` component supporting both plain text and rich text formatting

## Colours
Authors cannot set background and text colours for this component. The Section wrapper does not receive CMS colour configuration.

## Used fields

| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|----------------|---------------------------|
| id | Symbol | Sets unique identifier for section anchor | No anchor functionality |
| index | Number | Determines heading element level and image priority | Defaults to 0, affects heading hierarchy |
| componentType | Symbol | Required identifier for component registration | Component fails to render |
| heading | Symbol | Fallback heading text if no person title available | Uses person title from page context instead |
| body | Rich Text | Fallback body content if no person bio/description available | Uses person bio/description from page context instead |
| visual | Media reference | Fallback image if no person featured image available | Uses person featured image from page context instead |
| textSize | Symbol | Controls typography scale (Small/Medium/Large) | Defaults to Medium sizing |
| cmsLabel | Symbol | Analytics and accessibility label | No component labeling |

## Behaviour
Component prioritizes person data from page context over CMS fields. Person title overrides heading field, person bio/description overrides body field, person featured image overrides visual field. Falls back to CMS fields when person context unavailable. Circular image cropping applies automatically with object-cover fitting. Index position affects heading element hierarchy and image loading priority.

## Impact of content changes
- **Add/remove visual or person featured image**: Shows/hides circular profile image section
- **Add/remove heading or person title**: Shows/hides main heading text
- **Add/remove body or person bio**: Shows/hides descriptive text below heading
- **Change textSize**: Scales all typography up (Large) or down (Small) from baseline Medium
- **Change index**: Affects heading element level and image loading priority