# Hero text left search top signup
A hero section with text content positioned on the left side and a search interface displayed above the content, specifically configured for signup functionality.

## Screenshots

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

## What it looks like
The component displays a search interface at the top spanning most of the container width. Below that, content is arranged in a two-column layout on desktop with text content on the left side and an optional image on the right. On mobile, the layout stacks vertically with search at the top, followed by text content, then the image. The text column takes up the remaining width after accounting for the image width percentage. An optional icon appears above the text content when provided.

## Typography
- **Heading**: Uses the primary heading class determined by `getSizingInformation` - `h1` class for first component (index 0), `h2` class for subsequent components
- **Pre-heading**: Always uses `h4` class
- **Post-heading**: Uses `p` element with the same heading class as the main heading when a main heading exists, otherwise uses the primary heading element and class
- **Body text**: Uses `RtfOrString` with `rtf-standard` base class plus rich text sizing class from `getSizingInformation` (`rich-text-small`, `rich-text-medium`, or `rich-text-large`)
- **Additional copy**: Uses `RtfOrString` with `rtf-standard` class

## Colours
Authors cannot set background or text colours for this component type. The component uses default styling only.

## Used fields

| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|----------------|---------------------------|
| heading | Symbol | Displays as main heading with sizing based on component index | No main heading appears |
| body | Rich Text | Displays as formatted body text below heading | No body content shown |
| bodyStyles | Multiple reference | Applies additional CSS classes to body text | Body text uses default styling only |
| visual | Media reference | Shows image on right side of text content | No image displayed, text takes full width |
| links | Multiple reference | Renders action links below body text | No action links appear |
| icon | Media reference | Displays icon above text content | No icon shown |
| postHeading | Symbol | Shows secondary heading after main heading | No secondary heading |
| preHeading | Symbol | Shows introductory text above main heading | No introductory text |
| additionalCopy | Rich Text | Renders extra content below the main layout | No additional content |
| additionalCopyStyles | Multiple reference | Applies styling classes to additional copy | Additional copy uses default styling |
| textSize | Reference | Controls typography sizing (Small/Medium/Large) | Uses Medium sizing |
| anchor | Symbol | Sets HTML id attribute for page anchoring | No anchor point created |
| flags | Multiple reference | Modifies component behavior (e.g., "Hide mobile visual") | Default behavior applied |

## Behaviour
The search interface appears with signup-specific functionality enabled. Text content is left-aligned and positioned in the left column on desktop layouts. When an image is provided, it appears on the right with width determined by the visual's width percentage setting (defaults to 50% when not centered). The "Hide mobile visual" flag can hide the image on mobile devices while keeping it visible on desktop. Component index affects heading hierarchy - index 0 uses h1 element, others use h2.

## Impact of content changes
- **Adding/removing heading**: Shows or hides the main title and affects post-heading element type
- **Adding/removing visual**: Switches between full-width text layout and two-column text/image layout
- **Adding/removing body**: Controls presence of main descriptive content
- **Changing textSize**: Rescales all typography elements proportionally
- **Adding links**: Provides call-to-action buttons below content
- **Setting "Hide mobile visual" flag**: Makes image desktop-only while keeping mobile text layout