# Heading with narrow left image right text
A narrow layout with centered heading above image-left/text-right content arrangement for focused messaging.

## Screenshots

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

## What it looks like
The component displays in a narrow layout with three distinct sections:
- A centered heading that spans the full width, constrained to 50% width on laptop screens
- An image block on the left side with optional additional copy below
- A text content block on the right side with optional pre-heading, post-heading, body text, and action links
- On mobile, content stacks vertically; on laptop and larger screens, image and text appear side-by-side
- Optional icon can appear above the main heading

## Typography
- Main heading uses heading level determined by `getSizingInformation`: h1 for first component (index 0), h2 for subsequent components, with actual visual styling based on textSize field
- Pre-heading uses `eyebrow` class
- Post-heading uses h3 element with h6 visual styling from sizing information
- Body text uses `rtf-standard` class combined with rich text sizing class
- Additional copy below image uses `rtf-standard` class with rich text sizing
- Visual heading classes follow textSize mapping: Large=h1/h2/h3/h4/h5/h6, Medium=h2/h3/h4/h5/h6/p-sm, Small=h3/h4/h5/h6/p-sm/p-xs

## Colours
Authors cannot set background or text colours for this component. The component inherits colours from its parent section context.

## Used fields

| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|-----------------|---------------------------|
| id | Symbol | Used for preview field identification | No preview field marking |
| index | Number | Determines heading element level (h1 for 0, h2 for others) and image loading priority | Defaults to undefined, affects heading semantics |
| heading | Symbol | Displays as centered main heading above content | No main heading shown |
| body | Rich Text | Renders as formatted text content in right column | No body text displayed |
| bodyStyles | Multiple Selection | Applies additional CSS classes to body text | No additional styling applied |
| visual | Media | Shows image in left column with responsive sizing | No image block displayed |
| icon | Media | Displays icon above the main heading | No icon shown |
| links | Reference | Renders as action buttons/links below body text | No action links displayed |
| anchor | Symbol | Sets section ID for scroll targeting | No anchor ID set |
| preHeading | Symbol | Shows eyebrow text above heading in right column | No pre-heading displayed |
| postHeading | Symbol | Displays as h3 element below heading in right column | No post-heading shown |
| additionalCopy | Rich Text | Renders below image in left column | No additional copy under image |
| additionalCopyStyles | Multiple Selection | Applies styling classes to additional copy | No additional styling on additional copy |
| textSize | Selection | Controls typography scale (Small/Medium/Large) | Defaults to Medium sizing |
| cmsLabel | Symbol | Used for analytics tracking and component identification | No tracking label |
| flags | Multiple Selection | Controls special behaviors like "Hide mobile visual" | No special flags applied |

## Behaviour
The component uses the `headingAbove: true` variant configuration, meaning the main heading appears centered above the image/text layout rather than inline with the text block. Content width is dynamically calculated based on visual width percentage, with text taking the remaining space. Images are hidden on mobile when "Hide mobile visual" flag is set. Loading priority for images is calculated based on component index. The narrow layout applies 50% width constraint to the centered heading on laptop screens.

## Impact of content changes
- **Adding/removing heading**: Shows/hides the centered title above the layout
- **Adding/removing visual**: Shows/hides the left image column entirely 
- **Adding/removing body text**: Shows/hides the main text content in right column
- **Adding/removing links**: Shows/hides action buttons below text content
- **Changing textSize**: Scales all typography up (Large) or down (Small) from Medium baseline
- **Adding "Hide mobile visual" flag**: Makes image invisible on mobile devices while keeping it on desktop