# Hero text right search bottom
A hero section with text content positioned on the right side and a search component positioned below the content.

## Screenshots

| Variant | Preview |
|---------|---------|
| default | ![default](hero-text-right-search-bottom-default.png) |
| gray | ![gray](hero-text-right-search-bottom-gray.png) |
| light gray | ![light gray](hero-text-right-search-bottom-light-gray.png) |

## What it looks like
On laptop and desktop, content flows horizontally with the visual image on the left taking up a percentage of the width (default 50%) and text content on the right taking up the remaining space. On mobile, content stacks vertically with the visual above the text. Below all content, a search component spans the full width. The text section contains an optional icon, pre-heading, main heading, post-heading, body copy, and action links arranged vertically. Additional copy can appear at the bottom of the entire component.

## Typography
- Main heading uses sizing based on `getSizingInformation` rules: `h1` class for first component on page (`index` 0), `h2` for subsequent components, scaled by `textSize` field (Large/Medium/Small)
- Pre-heading and post-heading use `h4` equivalent from sizing information
- Body copy uses rich text classes with `rtf-standard` base plus sizing-appropriate rich text class
- Additional copy uses `rtf-standard` with any specified additional copy style classes
- Icon displays as visual element without text styling

## Colours
Authors cannot set background or text colours for this component type. The Section wrapper does not include `backgroundColour` or `textColour` fields.

## Used fields

| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|----------------|---------------------------|
| id | Symbol | Creates unique identifier for the component | No specific identifier assigned |
| index | Number | Determines heading hierarchy (0 = h1, others = h2) and image loading priority | Defaults to h1 and standard image priority |
| heading | Symbol | Displays as main heading with appropriate typography | No main heading shown |
| body | Rich Text | Displays as formatted body copy below heading | No body content shown |
| bodyStyles | Array | Applies additional CSS classes to body content | Uses default styling only |
| visual | Media reference | Shows image on left side (laptop+) or above text (mobile) | Text spans full width, no image shown |
| links | Array | Renders action buttons below body copy | No action buttons displayed |
| icon | Media reference | Shows small icon above pre-heading | No icon displayed |
| postHeading | Symbol | Shows secondary heading below main heading | No post-heading shown |
| preHeading | Symbol | Shows introductory text above main heading | No pre-heading shown |
| additionalCopy | Rich Text | Displays additional content at bottom of component | No additional content shown |
| additionalCopyStyles | Array | Applies CSS classes to additional copy | Additional copy uses default styling |
| textSize | Select (Small/Medium/Large) | Scales all text sizing (Medium is default) | Uses Medium sizing |
| anchor | Symbol | Sets HTML id attribute for deep linking | No anchor link available |
| cmsLabel | Symbol | Used for analytics tracking and component identification | No tracking label assigned |
| flags | Array | "Hide mobile visual" flag hides image on mobile devices | All content shown on all devices |

## Behaviour
The text content always appears on the right side on laptop+ viewports and stacks below the visual on mobile. The search component always appears below all other content spanning the container width. Visual width percentage can be controlled through the visual's width settings, affecting the remaining space for text. The "Hide mobile visual" flag removes the image entirely on mobile while preserving the text layout. Links are rendered as action buttons with analytics tracking using the `cmsLabel` value.

## Impact of content changes
- Adding/removing `visual`: Changes layout from full-width text to split layout with image on left
- Adding/removing `heading`: Main heading appears/disappears, affects heading hierarchy for subsequent components  
- Adding/removing `body`: Primary content area appears/disappears below heading
- Adding/removing `links`: Action buttons appear/disappear below body content
- Adding "Hide mobile visual" to `flags`: Image becomes hidden on mobile devices only
- Changing `textSize`: All text elements scale larger (Large) or smaller (Small) from Medium default
- Adding/removing `additionalCopy`: Extra content section appears/disappears at component bottom