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

## Screenshots

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

## What it looks like
The component displays a search bar spanning the full width at the top. Below that, on desktop and larger screens, content splits into two columns: a visual/image on the left taking up the configured width percentage (default 50%), and text content on the right in the remaining space. On mobile, the layout stacks vertically with the image above the text. Optional additional copy can appear below the main layout spanning the full width.

## Typography
- `heading`: Uses heading level based on section index via getSizingInformation (h1 for first section, h2 for subsequent sections)
- `preHeading` and `postHeading`: Always use h4 class regardless of section position
- `body`: Rich text content using `rtf-standard` class combined with size-appropriate rich text class from getSizingInformation
- `additionalCopy`: Rich text content using `rtf-standard` class with optional style classes applied
- Text sizing follows the `textSize` field: Small, Medium (default), or Large, which scales all typography proportionally

## Colours
Authors cannot set background or text colours for this component type. The Section wrapper controls colours through its own colour settings.

## Used fields
| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|----------------|---------------------------|
| id | Symbol | Sets component ID for anchoring and preview | No ID or anchor applied |
| index | Number | Determines heading hierarchy and image priority | Defaults to 0, affects heading levels |
| heading | Symbol | Displays as main heading with size based on index | No main heading shown |
| body | Rich Text | Displays formatted text content below heading | No body text shown |
| bodyStyles | Array of Symbol | Applies additional CSS classes to body text | Default rich text styling only |
| visual | Asset | Shows responsive image on left side | No image displayed, text takes full width |
| links | Array of Entry | Renders action buttons below text content | No action buttons shown |
| icon | Asset | Displays small icon above all text content | No icon shown |
| postHeading | Symbol | Shows secondary heading after main heading | No secondary heading |
| preHeading | Symbol | Shows introductory text before main heading | No introductory text |
| additionalCopy | Rich Text | Displays extra content below main layout | No additional content |
| additionalCopyStyles | Array of Symbol | Applies CSS classes to additional copy | Default styling for additional copy |
| textSize | Symbol | Controls overall typography scale (Small/Medium/Large) | Uses Medium sizing |
| anchor | Symbol | Sets page anchor for navigation | No anchor navigation |
| cmsLabel | Symbol | Used for analytics tracking | No tracking label |
| flags | Array of Symbol | Special display options (e.g., "Hide mobile visual") | Default responsive behavior |

## Behaviour
The search component always appears at the top spanning columns 2-11 on desktop (centered). The main content uses a two-column layout on desktop with image width controlled by the visual's width percentage setting. Text positioning is fixed to the right side. On mobile, content stacks vertically. The "Hide mobile visual" flag can hide the image on smaller screens. Component uses hero-specific spacing and grid positioning within the Section wrapper.

## Impact of content changes
- Adding/removing `visual`: Toggles between full-width text layout and two-column layout
- Adding/removing `heading`: Shows/hides the primary heading element
- Changing `textSize`: Scales all typography and rich text content proportionally
- Adding "Hide mobile visual" to `flags`: Makes image invisible on mobile while keeping desktop layout
- Adding/removing `links`: Shows/hides action button area below text
- Adding/removing `additionalCopy`: Shows/hides full-width content section at bottom