# Hero text left search top results
A large hero section with left-aligned text content, a search component positioned above the text, and search results displayed within the search area.

## Screenshots

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

## What it looks like
Two-column layout on laptop and above, with text content in the left column and visual media in the right column. On mobile, content stacks vertically with text above the image. The search component spans the full width above both columns. Text content includes optional pre-heading, main heading, post-heading, body copy, and action links. Visual content occupies 50% width by default on desktop. Search results are displayed within the search interface at the top.

## Typography
- **Main heading**: Uses `h1` class for first component on page, `h2` for subsequent components
- **Pre-heading**: Uses `h4` class from sizing information
- **Post-heading**: Uses `p` element with `h4` class when main heading is present, otherwise uses same element as main heading
- **Body copy**: Uses `rtf-standard` class combined with rich text size class (`rich-text-small`, `rich-text-medium`, or `rich-text-large`) based on textSize field
- **Additional copy**: Uses `rtf-standard` class with optional style classes

Typography scales based on textSize field: Small reduces heading levels by 2, Medium uses standard levels, Large uses largest sizing.

## Colours
Authors cannot set background or text colours for this component. Colour styling is managed at the theme or page level.

## Used fields

| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|----------------|---------------------------|
| id | Symbol | Creates anchor link target for the section | No anchor link available |
| index | Number | Determines heading element level and image loading priority | Uses default heading hierarchy and standard image loading |
| heading | Symbol | Displays as main heading with appropriate typography | No main heading shown |
| body | Rich Text | Displays formatted body content below headings | No body content shown |
| bodyStyles | Multiple Symbol | Applies CSS classes to body content for styling | Body uses default styling only |
| visual | Media reference | Shows image in right column on desktop, below text on mobile | No visual content, text takes available space |
| links | Reference (multiple) | Displays action buttons/links below body content | No action links shown |
| icon | Media reference | Shows icon above all text content | No icon displayed |
| postHeading | Symbol | Displays secondary heading after main heading | No post-heading shown |
| preHeading | Symbol | Displays introductory text above main heading | No pre-heading shown |
| additionalCopy | Rich Text | Shows extra content below the main section | No additional copy displayed |
| additionalCopyStyles | Multiple Symbol | Applies CSS classes to additional copy | Additional copy uses default styling |
| textSize | Symbol | Controls typography scale (Small/Medium/Large) | Uses Medium sizing by default |
| anchor | Symbol | Sets section anchor ID for navigation | No custom anchor available |
| cmsLabel | Symbol | Used for analytics tracking | No specific tracking label |
| flags | Multiple Symbol | Controls visual behavior (e.g., "Hide mobile visual") | Default visual behavior applies |

## Behaviour
The search component appears above all other content and includes search results functionality. Text content stacks vertically in the left column with icon first (if present), then pre-heading, main heading, post-heading, body copy, and links. Visual content appears in the right column on desktop but can be hidden on mobile with the "Hide mobile visual" flag. The component uses hero-spacing for vertical padding and grid-flow-row-dense for content arrangement. Image loading priority is calculated based on component index position on the page.

## Impact
- **Adding/removing heading**: Changes semantic structure and hierarchy of the section
- **Adding/removing visual**: Switches between single-column text layout and two-column text/image layout
- **Adding/removing search functionality**: This variant always includes search with results display
- **Adding bodyStyles or additionalCopyStyles**: Applies custom CSS classes for visual formatting
- **Changing textSize**: Scales all typography up or down while maintaining relative hierarchy
- **Adding "Hide mobile visual" flag**: Visual content disappears on mobile devices but remains on desktop