# Hero text left search top
A hero section with text content positioned on the left, visual content on the right, and a search interface displayed above the text content.

## Screenshots

| Variant | Preview |
|---------|---------|
| default | ![default](default-hero-text-left-search-top.png) |
| purple | ![purple](purple-hero-text-left-search-top.png) |

## What it looks like
The search interface spans the full width at the top. Below that, content is arranged in two columns on desktop: text content on the left (50% width by default) and visual content on the right (50% width by default). On mobile, content stacks vertically with the visual below the text. The visual width percentage can be customized through the visual field settings, which automatically adjusts the text column width to fill the remaining space.

## Typography
- **heading**: Uses `h1` class for index 0, `h2` for later sections (determined by getSizingInformation)
- **preHeading**: Uses `h4` equivalent class from sizing information
- **postHeading**: Uses `h4` equivalent class when heading is present, otherwise inherits the main heading element level
- **body**: Uses rich text styling with `rtf-standard` class plus sizing-appropriate rich text class
- **additionalCopy**: Uses `rtf-standard` class with any additional copy style classes

Text sizing follows the textSize field: Small, Medium (default), or Large, which affects all typography through getSizingInformation mappings.

## Colours
Authors cannot set background or text colours for this component type. Colours are determined by the parent Section wrapper or theme defaults.

## Used fields

| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|----------------|---------------------------|
| id | Symbol | Provides anchor ID for the section | No anchor navigation available |
| index | Number | Determines heading element level (h1 for 0, h2 for others) | Defaults to h1 equivalent |
| heading | Symbol | Displays as main heading with appropriate typography | No main heading shown |
| body | Rich Text | Renders rich text content below heading | No body content displayed |
| bodyStyles | Array | Applies additional CSS classes to body content | Standard rich text styling only |
| visual | Media | Shows image/video on right side of text | No visual content, text takes full width |
| links | Array | Renders action links below text content | No call-to-action links |
| icon | Media | Displays icon above heading | No icon shown |
| postHeading | Symbol | Shows additional heading below main heading | No secondary heading |
| preHeading | Symbol | Shows heading above main heading | No pre-heading content |
| additionalCopy | Rich Text | Renders additional rich text below main content area | No additional copy |
| additionalCopyStyles | Array | Applies CSS classes to additional copy | Standard styling for additional copy |
| textSize | Symbol | Controls typography scale (Small/Medium/Large) | Defaults to Medium sizing |
| anchor | Symbol | Sets section anchor for navigation | Uses id field or no anchor |
| cmsLabel | Symbol | Provides tracking label for analytics | No analytics component labeling |
| flags | Array | Controls special behaviors like "Hide mobile visual" | No special behaviors applied |

## Behaviour
The search interface appears at the top and includes form fields for trip search functionality. Text content aligns left within its column. Visual content maintains aspect ratio and applies rounded corners. On mobile devices, if "Hide mobile visual" flag is set, the visual content is hidden. The search component includes analytics tracking using the cmsLabel field. Text and visual order is fixed: text always on left, visual on right for desktop layout.

## Impact
- **Adding/removing heading**: Shows/hides main heading text with largest typography
- **Adding/removing visual**: Changes layout from single-column text to two-column text+visual split
- **Setting textSize**: Scales all typography elements up (Large) or down (Small) from default Medium
- **Adding body or additionalCopy**: Provides rich text content areas with different positioning
- **Setting "Hide mobile visual" flag**: Visual disappears on mobile while remaining on desktop
- **Adding links**: Creates call-to-action buttons below main text content