# Heading with right image left text
A layout component with a centered heading above content arranged as text on the left and image on the right, suitable for feature descriptions or content highlights.

## Screenshots

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

## What it looks like
The component renders with a centered heading spanning the full width at the top. Below that, content is arranged in two columns on laptop and larger screens: text content on the left, visual content on the right. The layout uses CSS custom properties to respect the visual's width percentage, with text taking the remaining width. On mobile, content stacks vertically with text above image. An optional icon can appear centered above the heading.

## Typography
- Main heading uses sizing based on `getSizingInformation`: `h1` class for first component (index 0), `h2` for subsequent components
- Pre-heading uses `eyebrow` class
- Post-heading uses `h6` class from sizing information
- Body text uses `rtf-standard` class combined with rich text sizing class from `getSizingInformation`
- Additional copy under image uses same rich text styling as body
- Text size can be Small, Medium (default), or Large, affecting all text elements through the sizing system

## Colours
This component type does not include backgroundColour or textColour fields, so authors cannot set custom colours. The component inherits colours from its parent context.

## Used fields

| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|-----------------|---------------------------|
| id | Symbol | Sets component ID for preview helpers | No ID applied |
| index | Number | Determines heading level and text sizing | Defaults to 0 for sizing calculations |
| heading | Symbol | Displays as centered heading above content columns | No main heading shown |
| body | Rich Text | Shows as formatted text in left column | No body text in left column |
| bodyStyles | Multiple Selection | Applies CSS classes to body text (lowercase, space-to-dash conversion) | No additional styling on body |
| visual | Media Reference | Displays responsive image in right column | No image shown, right column empty |
| icon | Media Reference | Shows centered icon above heading | No icon displayed |
| links | Reference Multiple | Renders as SectionLinks component below body text | No links section |
| anchor | Symbol | Sets section anchor/ID | No anchor set |
| preHeading | Symbol | Shows as eyebrow text above main heading | No pre-heading |
| postHeading | Symbol | Displays as h6 text below main heading | No post-heading |
| additionalCopy | Rich Text | Shows formatted text below image in right column | No additional copy under image |
| additionalCopyStyles | Multiple Selection | Applies CSS classes to additional copy | No additional styling on additional copy |
| textSize | Selection (Small/Medium/Large) | Controls typography scaling for all text elements | Defaults to Medium sizing |
| cmsLabel | Symbol | Used for analytics tracking on links and visuals | No tracking label |
| flags | Multiple Selection | "Hide mobile visual" flag hides image on mobile screens | Visual shows on all screen sizes |

## Behaviour
The heading always appears above the two-column layout when present. Text and image columns only render if they contain content - empty columns are not displayed. The component uses flexbox ordering to position text left and image right on laptop screens. Visual width percentage from the media reference determines column proportions. Links render with analytics tracking using the cmsLabel. The "Hide mobile visual" flag specifically hides the image on mobile while keeping additional copy visible.

## Impact of content changes
- **Add/remove heading**: Shows/hides centered title above columns
- **Add/remove visual**: Shows/hides right column entirely if no additionalCopy
- **Add/remove body**: Shows/hides left column entirely if no other text content
- **Change textSize**: Scales all typography elements proportionally
- **Add "Hide mobile visual" flag**: Image disappears on mobile, additional copy remains
- **Change visual width**: Adjusts proportional column widths on desktop