# Left image right text
A side-by-side layout component with an image on the left and text content on the right, using a 50/50 split on desktop and stacking on mobile.

## Screenshots

| Variant | Preview |
|---------|---------|
| No component screenshots available | — |

## What it looks like
Desktop displays two equal-width columns: image block on the left (50% width), text block on the right (50% width). Mobile stacks vertically with text content appearing first, then the image below. The image width percentage can be customized via the visual field's width setting, with text taking the remaining space. Optional elements include pre-heading eyebrow text, main heading, post-heading subtext, body copy, additional copy below the image, and action links.

## Typography
- Heading uses dynamic sizing based on section index: `h1` for first component, `h2` for subsequent components when textSize is Medium
- Pre-heading uses `eyebrow` class styling
- Post-heading uses `h6` class from sizing information
- Body copy uses `rtf-standard` with dynamic rich text class based on textSize (rich-text-medium by default)
- Additional copy below image uses same rich text styling as body
- Text sizing can be Small, Medium, or Large affecting all text elements proportionally
- Body and additional copy can have custom style classes applied via bodyStyles and additionalCopyStyles fields

## Colours
Authors cannot set background or text colours for this section type.

## Used fields

| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|-----------------|---------------------------|
| id | Symbol | Sets component ID for preview editing | No special ID assigned |
| index | Number | Determines heading hierarchy and image loading priority | Uses default index handling |
| heading | Symbol | Displays as main heading with dynamic sizing | No main heading shown |
| body | Rich Text | Renders as formatted body content in text block | No body content displayed |
| bodyStyles | Multiple Reference | Applies custom CSS classes to body content | Uses default rich text styling |
| visual | Media Reference | Shows image in left column with responsive sizing | No image block displayed |
| icon | Media Reference | Displays icon above all content | No icon shown |
| links | Multiple Reference | Renders as action buttons below text content | No action links displayed |
| anchor | Symbol | Sets section anchor/ID for navigation | No anchor link available |
| preHeading | Symbol | Shows eyebrow text above heading | No pre-heading displayed |
| postHeading | Symbol | Displays subheading below main heading | No post-heading shown |
| additionalCopy | Rich Text | Renders formatted text below the image | No additional copy below image |
| additionalCopyStyles | Multiple Reference | Applies custom CSS classes to additional copy | Uses default rich text styling for additional copy |
| textSize | Reference | Sets Small/Medium/Large sizing for all text elements | Uses Medium sizing by default |
| cmsLabel | Symbol | Used for analytics tracking on links and images | No tracking label applied |
| flags | Multiple Symbol | "Hide mobile visual" flag hides image on mobile devices | Image visible on all devices |

## Behaviour
Component only renders if either text content (heading, body, or links) or image content (visual or additional copy) exists. Image priority is calculated based on component index for performance optimization. Mobile responsive behavior stacks content vertically with text appearing first. The Hide mobile visual flag completely removes the image on mobile while preserving desktop layout. Component uses Section wrapper with responsive grid system and standard section spacing.

## Impact of content changes
- Adding/removing visual: Shows/hides entire left image column and adjusts text column width
- Adding/removing heading: Shows/hides main heading with appropriate semantic level
- Adding/removing body: Shows/hides primary text content in right column  
- Adding/removing links: Shows/hides action button section below text
- Adding/removing additionalCopy: Shows/hides text content below image
- Setting Hide mobile visual flag: Image disappears on mobile devices only
- Changing textSize: All text elements resize proportionally (Small/Medium/Large)
- Adding icon: Icon appears centered above all other content