# Hero centered text
A large header section with centered text alignment, suitable for page introductions and landing page headers.

## Screenshots

| Variant | Preview |
|---------|---------|
| black text | Screenshot showing Hero centered text with black text styling |
| default | Screenshot showing Hero centered text with default styling |
| white text | Screenshot showing Hero centered text with white text styling |

## What it looks like
Single-column layout with all text elements centered horizontally. On desktop and mobile, all content stacks vertically: optional icon, pre-heading, main heading, post-heading, body text, and action links. When a visual is present, it appears below the text content in mobile view and maintains centered alignment. The text content uses center text alignment and items-center flexbox alignment for consistent centering.

## Typography
- **Icon**: Uses `w-cols-2` sizing with responsive visual handling
- **Pre-heading**: Uses `h4` class (28px)
- **Main heading**: Uses heading level determined by `getSizingInformation` - `h1` for first section (48px), `h2` for subsequent sections (40px), with size variants available (Small/Medium/Large text size setting)
- **Post-heading**: Uses `h4` class when main heading is present, otherwise inherits the main heading element level
- **Body text**: Rich text with `rtf-standard` base classes plus `rich-text-medium` (default), with optional body style modifiers
- **Additional copy**: Rich text with `rtf-standard` base classes, spans full width below main content

## Colours
Authors cannot set background or text colours for this component type. Colours are controlled by the Section wrapper which handles the overall page design.

## Used fields

| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|-----------------|---------------------------|
| id | Symbol | Creates anchor link target for page navigation | No anchor functionality |
| index | Number | Determines heading hierarchy (0=h1, 1+=h2) and spacing | Defaults to h1 level |
| heading | Symbol | Displays main heading with appropriate typography size | No main heading shown |
| body | Rich Text | Shows formatted body text below heading | No body content |
| bodyStyles | Multiple Selection | Applies additional CSS classes to body text | Standard rich text styling only |
| visual | Media Reference | Shows image below text content, rounded corners | No image displayed |
| links | Reference Multiple | Renders action buttons/links below body text | No action buttons |
| icon | Media Reference | Displays small icon above all text content | No icon shown |
| postHeading | Symbol | Shows secondary heading below main heading | No post-heading text |
| preHeading | Symbol | Shows introductory text above main heading | No pre-heading text |
| additionalCopy | Rich Text | Shows extra content below everything else, full width | No additional content |
| additionalCopyStyles | Multiple Selection | Applies CSS classes to additional copy | Standard rich text styling for additional copy |
| textSize | Selection | Controls typography scale (Small/Medium/Large) | Uses Medium sizing |
| anchor | Symbol | Sets page anchor for deep linking | No anchor link capability |
| cmsLabel | Symbol | Provides analytics tracking label | No tracking identification |
| flags | Multiple Selection | Modifies component behavior (e.g., "Hide mobile visual") | Default behavior |

## Behaviour
Component renders with centered text alignment regardless of screen size. Visual content maintains centered layout and appears below text on all breakpoints. The Hide mobile visual flag removes image display on mobile devices while preserving it on desktop. Typography hierarchy follows semantic heading levels based on section index position. Links render as centered action buttons below the main content area.

## Impact of content changes
- **Add/remove heading**: Shows/hides main title and affects post-heading element level
- **Add/remove visual**: Shows/hides image below text content
- **Add/remove body**: Shows/hides main descriptive text
- **Add/remove links**: Shows/hides action button row
- **Change textSize**: Scales all typography up (Large) or down (Small) from Medium baseline
- **Add Hide mobile visual flag**: Image disappears on mobile but remains on desktop
- **Add/remove icon**: Small graphic appears/disappears above all text content