# Hero centered text search top
Displays a hero section with centered text content and a search interface positioned above the text content.

## Screenshots

| Variant | Preview |
|---------|---------|
| default | ![default](default) |
| gray | ![gray](gray) |
| light gray | ![light gray](light gray) |

## What it looks like
Content is arranged in a single column with center alignment. The search interface appears first at the top spanning 10 columns with margins on laptop viewports. Below that, all text content (icon, preHeading, heading, postHeading, body, links) is center-aligned in a vertical stack. If a visual is present, it appears below the text content and spans the full width on mobile, with the configured width percentage on laptop and up. The visual has rounded corners applied.

## Typography
- Icon: Visual element, no typography
- preHeading: Uses `h4` class from sizing information
- heading: Uses `h1` class (first section) or `h2` class (subsequent sections) from sizing information
- postHeading: Uses `h4` class when heading is present, otherwise uses the same element as heading
- body: Uses `rtf-standard` with rich text sizing class, plus any applied body styles
- additionalCopy: Uses `rtf-standard` with any applied additional copy styles
- Sizing follows getSizingInformation rules based on textSize field and section index

## Colours
Authors cannot set background or text colours for this component as it does not include backgroundColour or textColour fields.

## Used fields

| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|----------------|---------------------------|
| id | Symbol | Creates anchor point for section | No anchor available |
| index | Number | Determines heading element level and spacing | Uses default positioning |
| heading | Symbol | Displays as main heading with center alignment | No main heading shown |
| body | Rich Text | Renders formatted content below heading | No body content displayed |
| bodyStyles | Multiple Reference | Applies CSS classes to body content | Body uses default styling only |
| visual | Media | Shows image/video below text content with rounded corners | No visual element appears |
| links | Multiple Reference | Renders action buttons below body content | No action buttons shown |
| icon | Media | Displays visual above all text content | No icon appears |
| postHeading | Symbol | Shows secondary heading below main heading | No secondary heading |
| preHeading | Symbol | Shows introductory text above main heading | No introductory text |
| additionalCopy | Rich Text | Renders formatted content at bottom spanning full width | No additional content |
| additionalCopyStyles | Multiple Reference | Applies CSS classes to additional copy | Additional copy uses default styling |
| textSize | Selection | Controls typography scale (Small/Medium/Large) | Uses Medium sizing |
| anchor | Symbol | Creates URL anchor for deep linking | No deep linking available |
| cmsLabel | Symbol | Used for analytics tracking | No component-level tracking |
| flags | Multiple Reference | Controls visual behavior (e.g., hide mobile visual) | All visuals show by default |

## Behaviour
Search interface always appears at the top with standard search functionality. Content uses center text alignment throughout. Visual width is controlled by the visual's width percentage setting, defaulting to full width for centered layout. The "Hide mobile visual" flag completely hides visuals on mobile viewports. Section index determines heading hierarchy following standard SEO practices.

## Impact of content changes
- **Add/remove heading**: Main focal point appears or disappears, affects heading hierarchy
- **Add/remove visual**: Large visual element appears below text or section becomes text-only
- **Add/remove search**: Search interface at top appears or disappears
- **Change textSize**: All typography scales up (Large) or down (Small) proportionally
- **Add body or additionalCopy**: Substantial text content appears, increasing section height
- **Toggle "Hide mobile visual" flag**: Visual disappears on mobile devices only