# Right image left text
A two-column layout component for pairing explanatory text content with a supporting image, where the image appears on the right side and text flows on the left.

## Screenshots

| Variant | Preview |
|---------|---------|
| default | ![default](http://localhost:3016/cms/screenshot?file=components%2Fright-image-left-text-default.png) |
| purpleDark | ![purpleDark](http://localhost:3016/cms/screenshot?file=components%2Fright-image-left-text-purpleDark.png) |

## What it looks like
On mobile, content stacks vertically with image first, then text below. On laptop and larger screens, content displays as two columns with text on the left and image on the right. The image column width is determined by the visual's width percentage (default 50%), with text taking the remaining space. The layout centers within the standard content grid with normal section spacing above and below.

## Typography
- Main heading uses sizing based on component index: `h1` for first component, `h2` for subsequent components
- Pre-heading text uses `eyebrow` class
- Post-heading uses `h3` class with size scaling based on textSize field
- Body content uses `rtf-standard` class combined with rich text sizing classes (`rich-text-small`, `rich-text-medium`, or `rich-text-large`)
- Additional copy below image uses same rich text sizing as body content
- Text sizing scales down when textSize is Small, up when Large, with Medium as default

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

## Used fields

| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|----------------|---------------------------|
| heading | Symbol | Displays as main heading on left side with appropriate heading level | No heading shown |
| preHeading | Symbol | Shows above heading with eyebrow styling | No pre-heading text |
| postHeading | Symbol | Displays below heading with h3 styling | No post-heading text |
| body | Rich Text | Renders as formatted text content on left side | No body text shown |
| bodyStyles | Multiple Symbol | Applies additional CSS classes to body text | Default body styling only |
| visual | Media reference | Shows image/media on right side | No visual content |
| additionalCopy | Rich Text | Renders formatted text below the image | No additional text below image |
| additionalCopyStyles | Multiple Symbol | Applies CSS classes to additional copy | Default additional copy styling |
| links | Reference | Renders as action buttons below text content | No action buttons |
| textSize | Symbol | Controls typography scale (Small/Medium/Large) | Uses Medium sizing |
| icon | Media reference | Displays centered above all content | No icon shown |
| anchor | Symbol | Sets section ID for page anchoring | No anchor ID |
| flags | Multiple Symbol | Enables special behaviors like "Hide mobile visual" | No special behaviors |

## Behaviour
The component uses index position to determine heading hierarchy - first component on page uses h1, subsequent components use h2. Text and image blocks only render when they contain content. The "Hide mobile visual" flag removes the image on mobile devices while keeping it on larger screens. Image width percentage from the visual field determines column proportions, defaulting to 50/50 split when not specified.

## Impact
- Adding/removing heading: Main title appears/disappears from left column
- Adding/removing visual: Right column image appears/disappears, affects overall layout balance
- Adding/removing body: Primary text content appears/disappears from left side
- Adding/removing links: Action buttons appear/disappear below text content
- Changing textSize: All text elements scale up (Large) or down (Small) from default Medium
- Adding "Hide mobile visual" flag: Image hidden on mobile but visible on desktop