# Heading with narrow right image left text
A narrow layout component with centered heading above image and text columns, where the image appears on the right and text on the left.

## Screenshots

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

## What it looks like
The component renders in three vertical sections: a centered heading at the top with maximum width constraints, followed by a two-column layout below. The text content appears in the left column, while the image and additional copy appear in the right column. On mobile, the layout stacks vertically with text above image. The narrow variant applies tighter width constraints than the standard layout.

## Typography
- Main heading: Uses heading level determined by `getSizingInformation` based on component index (h1 for first component, h2 for subsequent), with `sizingInformation.h1` class
- Pre-heading: Uses `eyebrow` class
- Post-heading: Uses `sizingInformation.h6` class  
- Body text: Uses `rtf-standard` class combined with `sizingInformation.richTextClassName`
- Additional copy: Uses `rtf-standard` class combined with `sizingInformation.richTextClassName`
- Icon: Rendered as visual element without typography classes

## Colours
Authors cannot set background and text colours for this component type. The section uses default styling.

## Used fields

| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|----------------|---------------------------|
| id | Symbol | Sets HTML id attribute for anchor linking | No id attribute applied |
| index | Number | Determines heading hierarchy and image priority calculation | Defaults to 0 for heading level and image loading |
| heading | Symbol | Displays as centered main heading above the columns | No main heading shown |
| body | Rich Text | Renders as formatted text in the left column | No body text displayed |
| bodyStyles | Multiple Reference | Applies additional CSS classes to body text | Only default rich text styling applied |
| visual | Media Reference | Displays image in the right column with responsive sizing | No image shown |
| icon | Media Reference | Displays icon above the heading | No icon displayed |
| links | Multiple Reference | Renders action buttons below body text | No action buttons shown |
| anchor | Symbol | Sets section anchor for navigation | No anchor navigation available |
| preHeading | Symbol | Shows eyebrow text above main heading | No pre-heading text |
| postHeading | Symbol | Displays subheading below main heading | No post-heading text |
| additionalCopy | Rich Text | Renders formatted text below the image in right column | No additional text below image |
| additionalCopyStyles | Multiple Reference | Applies styling classes to additional copy | Default styling only for additional copy |
| textSize | Reference | Controls overall typography scale (Small/Medium/Large) | Defaults to Medium sizing |
| cmsLabel | Symbol | Used for analytics tracking context | No analytics labeling |
| flags | Multiple Symbol | Controls special behaviors like "Hide mobile visual" | Default behavior without special flags |

## Behaviour
The heading appears centered and constrained to 50% width on laptop screens due to the narrow layout. Image width percentage can be customized via visual field configuration, affecting the relative column widths. The "Hide mobile visual" flag completely hides the image on mobile devices. Component index determines both heading hierarchy and image loading priority for performance optimization.

## Impact of content changes
- Adding/removing heading: Shows/hides the main centered title section
- Adding/removing visual: Shows/hides the right column image and affects column proportions
- Adding/removing body text: Shows/hides the left column text content
- Adding/removing links: Shows/hides action buttons below body text
- Changing textSize: Scales all typography and rich text elements proportionally
- Adding "Hide mobile visual" flag: Makes image disappear on mobile while keeping text visible