# Narrow right image left text
A layout component for displaying text content alongside a visual element, with the image positioned on the right side and text on the left, using a narrow container width.

## Screenshots

| Variant | Preview |
|---------|---------|
| default | ![default](narrow-right-image-left-text-default.png) |
| gray | ![gray](narrow-right-image-left-text-gray.png) |
| light gray | ![light gray](narrow-right-image-left-text-light-gray.png) |

## What it looks like
On mobile, content stacks vertically with text appearing above the image. On laptop and larger screens, the layout becomes a two-column arrangement where text content occupies the left column and the visual element fills the right column. The narrow variant uses a more constrained container width compared to the standard image-and-text layouts. The visual width can be customized through the visual's width percentage setting, with the text column automatically taking up the remaining space.

## Typography
- Heading uses sizing determined by `getSizingInformation` based on textSize field and section index: for index 0 uses `h1` element with corresponding text size class, for other indices uses `h2` element
- Pre-heading text uses `eyebrow` class
- Post-heading text uses the `h6` class from the sizing information
- Body content applies `rtf-standard` class combined with the `richTextClassName` from sizing information and any custom body styles
- Additional copy under the image uses `rtf-standard` class with sizing information and additional copy styles
- Text size variants (Small/Medium/Large) adjust all typography proportionally through the sizing system

## Colours
Authors cannot set background or text colours for this component type. Colour styling is handled by the parent Section wrapper.

## Used fields

| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|----------------|---------------------------|
| id | Symbol | Used for preview field props and component identification | No specific visual effect |
| index | Number | Determines heading element type (h1 for 0, h2 for others) and image priority | Defaults to 0 behavior |
| heading | Symbol | Displays as main heading in left text column | No heading shown |
| body | Rich Text | Renders as formatted text content below heading | No body text displayed |
| bodyStyles | Multiple Symbol | Applies additional CSS classes to body text | Uses default rich text styling |
| visual | Media reference | Shows responsive image/video in right column | No visual content, only text column appears |
| icon | Media reference | Displays above all other content | No icon shown |
| links | Multiple Link | Renders as action buttons below text content | No call-to-action buttons |
| anchor | Symbol | Sets section ID for page anchoring | No anchor link available |
| preHeading | Symbol | Shows eyebrow text above main heading | No pre-heading text |
| postHeading | Symbol | Displays secondary heading below main heading | No post-heading |
| additionalCopy | Rich Text | Shows formatted text below the visual element | No additional copy under image |
| additionalCopyStyles | Multiple Symbol | Applies styling classes to additional copy | Uses default rich text styling |
| textSize | Single Choice | Controls typography scale (Small/Medium/Large) | Defaults to Medium sizing |
| cmsLabel | Symbol | Used for analytics tracking on links and visuals | No tracking label |
| flags | Multiple Symbol | Special behaviors like "Hide mobile visual" | No special flags applied |

## Behaviour
The component adapts responsively from stacked mobile layout to side-by-side desktop arrangement. Visual width percentage from the visual field determines column proportions. When "Hide mobile visual" flag is set, the image is hidden on screens smaller than laptop size. Links render as styled action buttons with analytics tracking. The component only renders content sections that have actual content - empty text or image blocks are omitted from the layout.

## Impact of content changes
- Adding/removing **heading**: Shows/hides main heading in text column
- Adding/removing **visual**: Shows/hides right image column entirely
- Adding/removing **body**: Shows/hides main text content block
- Adding/removing **links**: Shows/hides call-to-action button section
- Changing **textSize**: Scales all typography up (Large) or down (Small) from Medium baseline
- Adding **preHeading**: Adds eyebrow text above main heading
- Setting **"Hide mobile visual" flag**: Removes image on mobile devices while keeping desktop layout