# Narrow left image right text
A narrow-width image and text layout with the image on the left side and text content on the right, constrained to a smaller section width for focused presentation.

## Screenshots

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

## What it looks like
On mobile, the layout stacks vertically with image above text. On laptop and larger screens, the content is arranged in a two-column layout within a narrower container width. The image appears on the left side with text content on the right. The visual width percentage can be customized, with the text taking up the remaining space. The entire layout is centered on the page.

## Typography
- Heading uses size based on section index: `h1` for first section, `h2` for subsequent sections, modified by textSize setting
- Pre-heading uses `eyebrow` class styling
- Post-heading uses `h6` class equivalent based on textSize
- Body content uses rich text styling with `rtf-standard` class plus textSize-specific rich text class
- Additional copy under image uses same rich text styling as body
- Text sizing follows Small/Medium/Large textSize field with Medium as default

## Colours
Authors cannot set background or text colours for this component type. The section uses the default colours from the design system.

## Used fields

| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|-----------------|---------------------------|
| id | Symbol | Sets component ID for preview helpers | No special ID assigned |
| index | Number | Determines heading level and image priority | Uses default heading level and image priority |
| heading | Symbol | Displays as main heading below any pre-heading | No main heading shown |
| body | Rich Text | Renders as formatted body content below heading | No body content area |
| bodyStyles | Multiple Reference | Applies additional CSS classes to body content | Uses default rich text styling only |
| visual | Media Reference | Shows responsive image on left side | No image displayed, text takes full width |
| icon | Media Reference | Displays icon above the main content | No icon shown |
| links | Reference | Renders as action links below body content | No links section |
| anchor | Symbol | Sets section anchor ID for navigation | No anchor navigation available |
| preHeading | Symbol | Shows eyebrow text above main heading | No pre-heading content |
| postHeading | Symbol | Displays secondary heading below main heading | No post-heading |
| additionalCopy | Rich Text | Renders formatted text below the image | No additional copy under image |
| additionalCopyStyles | Multiple Reference | Applies CSS classes to additional copy | Uses default styling for additional copy |
| textSize | Reference | Controls typography scale (Small/Medium/Large) | Uses Medium size as default |
| cmsLabel | Symbol | Used for analytics tracking context | No tracking label applied |
| flags | Multiple Symbol | "Hide mobile visual" flag hides image on mobile | Image visible on all screen sizes |

## Behaviour
The component uses a narrow layout variant that constrains content width more than the full-width version. Image priority is calculated based on the index field for performance optimization. The "Hide mobile visual" flag in the flags field can hide the image on mobile devices while keeping it visible on larger screens. Visual width percentage can be customized through the visual field settings, with text automatically adjusting to fill remaining space. Links are rendered with analytics tracking using the cmsLabel field.

## Impact
- Adding/removing visual: Shows/hides left image column and adjusts text to full width or shared width
- Adding/removing heading: Shows/hides main title section
- Adding/removing body: Shows/hides main content area below heading
- Adding/removing links: Shows/hides action buttons section below content
- Setting "Hide mobile visual" flag: Makes image disappear on mobile while keeping desktop layout
- Changing textSize: Scales all typography and spacing proportionally
- Adding icon: Shows icon above all other content
- Adding additionalCopy: Shows formatted text below the image