# Hero text left
A prominent banner component with text content positioned on the left side and optional visual media on the right side.

## Screenshots

| Variant | Preview |
|---------|---------|
| deepPurple | ![deepPurple](deepPurple-preview.png) |
| default | ![default](default-preview.png) |
| showLinks=false | ![showLinks=false](showLinks-false-preview.png) |

## What it looks like
The component displays as a two-column layout on larger screens with text content in the left column and visual media in the right column. On mobile devices, it stacks vertically with text above the image. The text column includes optional icon, pre-heading, main heading, post-heading, body copy, and action links arranged vertically. The visual column shows responsive images or media when provided. The layout uses CSS custom properties to control the width distribution between text and visual sections.

## Typography
- Main heading uses sizing based on component index: `h1` for first component, `h2` for subsequent components
- Pre-heading uses `h4` class
- Post-heading uses `h4` class when main heading is present, otherwise uses the same element and sizing as main heading
- Body content uses rich text styling with classes from `bodyStyles`
- Additional copy uses rich text styling with classes from `additionalCopyStyles`
- Text sizing can be overridden via `textSize` field using Small, Medium, or Large presets that map heading levels accordingly

## Colours
Authors cannot set background and text colours for this component. The Section wrapper receives colours from its parent container or page-level settings.

## Used fields

| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|----------------|---------------------------|
| id | Symbol | Used for preview field targeting | No preview field targeting |
| index | Number | Determines heading element level and spacing | Defaults to 0 |
| heading | Symbol | Displays as main heading with appropriate sizing | No main heading shown |
| body | Rich Text | Renders as formatted body content with styling | No body content displayed |
| bodyStyles | Multiple Symbol | Applies additional CSS classes to body content | Uses default rich text styling only |
| visual | Media | Shows responsive image/media in right column | No visual content, text spans full width |
| links | Reference | Renders as action buttons/links below text | No action links displayed |
| icon | Media | Shows small icon above text content | No icon displayed |
| postHeading | Symbol | Displays secondary heading after main heading | No post-heading content |
| preHeading | Symbol | Displays introductory text above main heading | No pre-heading content |
| additionalCopy | Rich Text | Renders below the main layout spanning full width | No additional copy section |
| additionalCopyStyles | Multiple Symbol | Applies CSS classes to additional copy | Uses default rich text styling for additional copy |
| textSize | Symbol | Overrides default typography sizing (Small/Medium/Large) | Uses Medium sizing by default |
| anchor | Symbol | Sets HTML id attribute for page linking | No anchor link available |
| cmsLabel | Symbol | Used for analytics tracking and component identification | No tracking label |
| flags | Multiple Symbol | Controls special behaviors like "Hide mobile visual" | Default behavior applies |

## Behaviour
The component uses a responsive layout that switches from horizontal (text left, image right) on desktop to vertical stacking on mobile. Visual width percentage is calculated from the visual field properties, defaulting to 50% when an image is present. The "Hide mobile visual" flag will hide the visual content on mobile devices while keeping it visible on desktop. Component spacing and typography scale based on the index position within the page. When no visual is provided, the text content expands to use the full width.

## Impact of content changes
- Adding/removing heading: Shows/hides the main title and affects post-heading element type
- Adding/removing visual: Changes from two-column layout to single-column text layout
- Adding/removing links: Shows/hides action buttons section below text
- Adding/removing body: Shows/hides main descriptive content
- Setting textSize: Scales all typography elements up or down according to preset sizing rules
- Adding flags: Can hide mobile visual or apply other behavioral modifications
- Changing index: Affects heading element levels and overall component hierarchy