# Hero text left search bottom
A hero component with text positioned on the left side and a search interface displayed below the content.

## Screenshots

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

## What it looks like
On mobile, content stacks vertically with text content first, followed by any visual/image, then the search interface at the bottom. On laptop and larger screens, the layout switches to a two-column format with text content on the left side and any visual content on the right side, maintaining the search interface below both columns. The text content includes optional icon, pre-heading, main heading, post-heading, body copy, and action links. Visual content uses rounded corners and can be hidden on mobile if the "Hide mobile visual" flag is set.

## Typography
- Main heading uses the `h1` class when this is the first component (index 0), otherwise uses `h2`
- Pre-heading and post-heading use the `h4` class from sizing information
- Body copy uses the `rtf-standard` class combined with the rich text class from sizing information (Small/Medium/Large text size setting)
- Additional copy uses the `rtf-standard` class
- Typography scales according to the textSize field: Small uses smaller heading classes (h3 for main heading at index 0), Medium is default scaling, Large uses full-size classes (h1 for main heading at index 0)

## Colours
Authors cannot set background or text colours directly on this component. The component does not include backgroundColour or textColour fields.

## Used fields

| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|----------------|---------------------------|
| id | Symbol | Used for preview field identification | No visual impact |
| index | Number | Determines heading element level and image priority | Defaults to 0 behavior |
| heading | Symbol | Displays as main heading with appropriate typography sizing | No main heading shown |
| body | Rich Text | Renders as formatted body copy below heading | No body content displayed |
| bodyStyles | Multiple Symbol | Applies CSS classes to body content styling | Default body styling only |
| visual | Media reference | Shows image on right side with rounded corners | No visual content, text spans full width |
| links | Reference | Displays action buttons/links below body copy | No action links shown |
| icon | Media reference | Shows icon above pre-heading | No icon displayed |
| postHeading | Symbol | Displays below main heading with h4 styling | No post-heading content |
| preHeading | Symbol | Displays above main heading with h4 styling | No pre-heading content |
| additionalCopy | Rich Text | Renders below search as full-width rich text | No additional copy section |
| additionalCopyStyles | Multiple Symbol | Applies styling classes to additional copy | Default additional copy styling |
| textSize | Symbol | Controls typography scale (Small/Medium/Large) | Uses Medium sizing as default |
| anchor | Symbol | Sets section ID for navigation linking | No anchor link available |
| cmsLabel | Symbol | Used for analytics tracking | No tracking label |
| flags | Multiple Symbol | Controls responsive behavior like mobile visual hiding | Default responsive behavior |

## Behaviour
The search interface always appears below the main content area and spans the full width on mobile, with laptop breakpoint styling that centers it within content columns. Visual content width percentage determines the text-to-image ratio on desktop layouts. When no visual is provided, text content uses the full available width. The component uses hero-specific spacing classes and grid layout with row-dense flow to accommodate the search positioning. Image priority is calculated based on the component index for performance optimization.

## Impact of content changes
- Adding/removing heading: Shows/hides the main heading and affects whether postHeading uses paragraph or heading element
- Adding/removing visual: Changes layout from full-width text to two-column text-image layout on desktop
- Adding/removing body: Shows/hides the main descriptive content below headings
- Adding/removing links: Shows/hides action buttons below body content
- Changing textSize: Scales all typography elements proportionally (Small = smaller, Medium = default, Large = larger)
- Adding "Hide mobile visual" flag: Hides image on mobile while keeping desktop layout
- Adding/removing search-related content: Always shows search interface but may affect analytics tracking