# Hero centered text search bottom
A hero section with centered text content and a search widget positioned below the text and visual elements.

## Screenshots

| Variant | Preview |
|---------|---------|
| default | ![default](screenshot-hero-centered-text-search-bottom-default.png) |
| with visual | ![with visual](screenshot-hero-centered-text-search-bottom-with-visual.png) |

## What it looks like
The component displays content in a centered layout with all text elements aligned to the center. When a visual is present, it appears below the text content on mobile and alongside it on laptop screens. The search widget is positioned at the bottom of the entire hero section, spanning the content width. An optional icon can appear above the text content. The component uses a full-width section container with standard hero spacing.

## Typography
- **heading**: Uses the h1 class from sizing information (h2 for non-first sections, h3 when embedded)
- **preHeading**: Uses h4 class from sizing information
- **postHeading**: Uses h4 class from sizing information (or the main heading element class if no heading is set)
- **body**: Uses `rtf-standard` class combined with rich text sizing classes, with optional bodyStyles modifiers
- **additionalCopy**: Uses `rtf-standard` class with optional additionalCopyStyles modifiers

Text sizing follows the getSizingInformation system where the textSize field determines the scale (Small/Medium/Large), and the component index affects the semantic heading level.

## Colours
Authors cannot set background or text colours for this component type, as backgroundColour and textColour are not available fields. The component uses inherited styling from the Section wrapper.

## Used fields

| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|-----------------|---------------------------|
| id | Symbol | Sets component ID for preview system | No preview identification |
| index | Number | Determines heading semantic level and image priority | Uses default values (0) |
| heading | Symbol | Displays as main heading with h1 styling | No main heading shown |
| body | Rich Text | Displays as rich text content below heading | No body content shown |
| bodyStyles | Multiple Symbol | Applies additional CSS classes to body content | Uses default rich text styling |
| visual | Media | Shows image/video alongside text content | No visual content displayed |
| links | Multiple Entry | Renders section links below text content | No action buttons shown |
| icon | Media | Displays icon above all text content | No icon shown |
| postHeading | Symbol | Shows additional heading after main heading | No post-heading content |
| preHeading | Symbol | Shows introductory text before main heading | No pre-heading content |
| additionalCopy | Rich Text | Displays extra content at bottom of section | No additional content |
| additionalCopyStyles | Multiple Symbol | Applies CSS classes to additional copy | Uses default styling for additional copy |
| textSize | Symbol | Controls typography scale (Small/Medium/Large) | Uses Medium sizing |
| anchor | Symbol | Sets HTML anchor ID for the section | No anchor navigation available |
| cmsLabel | Symbol | Provides analytics tracking location | No tracking context |
| flags | Multiple Symbol | Controls special behaviors like "Hide mobile visual" | Uses default component behavior |

## Behaviour
The search widget always appears at the bottom of the hero section. Visual content, when present, uses responsive sizing and appears below text on mobile, beside text on larger screens. The component collapses section spacing by default. Icons are sized to 2 columns width. Links are center-aligned. Text positioning remains centered regardless of visual presence. The "Hide mobile visual" flag can hide the visual on mobile devices while keeping it visible on desktop.

## Impact of content changes
- **Adding heading**: Creates prominent centered main heading with largest text size
- **Adding visual**: Introduces side-by-side layout on desktop, stacked on mobile
- **Adding body text**: Provides rich text content area below headings
- **Adding links**: Creates action button row below text content
- **Removing visual**: Converts to text-only centered layout
- **Setting textSize to Large**: Increases all text elements to maximum scale
- **Adding icon**: Creates visual element above all text content