# Heading with left image right text
A section component that displays a centered heading above a two-column layout with image on the left and text content on the right.

## Screenshots

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

## What it looks like
The component renders as a full-width section with a centered heading at the top, followed by a two-column layout. The image occupies the left column (configurable width via visual settings, defaults to 50%), and text content fills the right column. On mobile devices, the layout stacks vertically with text appearing below the image. The heading is constrained to a maximum of 66% width and centered horizontally on desktop.

## Typography
- Main heading: Uses heading level determined by `getSizingInformation` based on section index and text size - `h1` for first section, `h2` for subsequent sections, with size classes `h1`, `h2`, or `h3` depending on text size setting
- 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 (`rich-text-small`, `rich-text-medium`, or `rich-text-large`)
- Additional copy: Uses `rtf-standard` class with the same rich text sizing as body text

## Colours
Authors cannot set background and text colours for this component type. The Section uses default styling without configurable colour options.

## Used fields

| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|-----------------|---------------------------|
| id | Symbol | Provides unique identifier for the component | No specific identifier applied |
| index | Number | Determines heading level and component priority | Defaults to 0 for heading level calculation |
| heading | Symbol | Displays as large centered heading above the layout | No main heading appears |
| body | Rich Text | Renders as formatted text content in the right column | No body text appears in text column |
| bodyStyles | Multiple Selection | Applies additional CSS classes to body text styling | Body text uses default rich text styling only |
| visual | Media Reference | Displays as image in the left column | No image appears, text column may expand |
| icon | Media Reference | Shows as icon above the centered heading | No icon appears |
| links | Reference Multiple | Renders as action buttons below body text | No action buttons appear |
| anchor | Symbol | Sets HTML id attribute for page linking | No anchor link available |
| preHeading | Symbol | Displays as eyebrow text above main heading | No pre-heading text appears |
| postHeading | Symbol | Shows as subheading below main heading | No post-heading appears |
| additionalCopy | Rich Text | Renders as formatted text below the image | No additional text below image |
| additionalCopyStyles | Multiple Selection | Applies styling classes to additional copy | Additional copy uses default styling |
| textSize | Symbol | Controls typography scale (Small/Medium/Large) | Defaults to Medium sizing |
| cmsLabel | Symbol | Used for analytics tracking context | No specific tracking label |
| flags | Multiple Selection | Modifies component behavior (e.g., "Hide mobile visual") | Default behavior applies |

## Behaviour
The heading always appears above the image-text layout when `headingAbove` is true for this variant. The component uses CSS custom properties to manage column widths based on visual width percentage. On mobile, the layout stacks vertically with image first, then text. The "Hide mobile visual" flag can hide the image on mobile devices while keeping it visible on desktop. Component renders only if content exists for either text block or image block sections.

## Impact of content changes
- **Adding/removing heading**: Main centered heading appears or disappears above layout
- **Adding/removing visual**: Left column image appears or disappears, affecting overall layout balance  
- **Adding/removing body text**: Right column content appears or disappears
- **Changing textSize**: All typography scales up (Large) or down (Small) from default Medium sizing
- **Adding links**: Action buttons appear below body text in right column
- **Setting "Hide mobile visual" flag**: Image hidden on mobile but visible on desktop breakpoints