# Hero text right
A prominent hero section with text positioned on the right side and optional media on the left side.

## Screenshots

| Variant | Preview |
|---------|---------|
| default | ![default](default screenshot) |
| gray4 | ![gray4](gray4 screenshot) |

## What it looks like
Two-column layout on laptop+ with text content right-aligned and visual media on the left. On mobile, stacks vertically with text above media. Text column takes up 50% width when visual is present, expanding to full width when no media. Content includes optional icon, pre-heading, main heading, post-heading, body copy, and action links.

## Typography
- **heading**: Uses `h1` class for first section (`index` 0), `h2` for subsequent sections
- **preHeading**: Uses `h4` class sizing from getSizingInformation
- **postHeading**: Uses `p` element with `h4` class when main heading exists, otherwise inherits main heading element
- **body**: Rich text with `rtf-standard` class plus size-specific `rich-text-*` class based on textSize
- **additionalCopy**: Rich text with `rtf-standard` class only

Text sizing follows Medium scale by default: h1→h2, h2→h3, h3→h4, etc. Can be overridden with Small or Large textSize setting.

## Colours
Authors cannot set background or text colours for this component type.

## Used fields

| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|-----------------|---------------------------|
| id | Symbol | Creates anchor ID for section | No anchor linking available |
| index | Number | Determines heading hierarchy (0=h1, 1+=h2) | Defaults to h1 sizing |
| heading | Symbol | Main heading displayed prominently | No main heading shown |
| body | Rich Text | Rich text content below heading | No body copy displayed |
| bodyStyles | Multiple Selection | Applies CSS classes to body content | Default styling only |
| visual | Media Reference | Image/video displayed on left side | Text spans full width |
| links | Reference Multiple | Action buttons/links below content | No call-to-action elements |
| icon | Media Reference | Small icon above all text content | No icon displayed |
| postHeading | Symbol | Secondary heading below main heading | No post-heading shown |
| preHeading | Symbol | Label text above main heading | No pre-heading shown |
| additionalCopy | Rich Text | Extra content at bottom of section | No additional copy |
| additionalCopyStyles | Multiple Selection | Applies CSS classes to additional copy | Default styling for additional copy |
| textSize | Selection | Controls typography scale (Small/Medium/Large) | Uses Medium scale |
| anchor | Symbol | Section anchor for navigation | No section anchor |
| cmsLabel | Symbol | Internal label for analytics tracking | No tracking label |
| flags | Multiple Selection | Special behaviours like "Hide mobile visual" | Default behaviours apply |

## Behaviour
Text content always appears on the right side in desktop layout, ordered second in HTML. When visual is present, layout splits 50/50. Mobile layout stacks text above visual. The flags field supports "Hide mobile visual" to hide media on mobile devices. Search functionality is not available in this variant. Content centers within its text column area but text-aligns left.

## Impact of content changes
- **Add/remove visual**: Toggles between full-width text and two-column split layout
- **Add/remove heading**: Changes post-heading element from p to heading level
- **Change textSize**: Scales all typography up/down (Small/Medium/Large)
- **Add "Hide mobile visual" flag**: Makes visual desktop-only
- **Add/remove links**: Shows/hides call-to-action button area
- **Change index**: Affects heading hierarchy (h1 vs h2 for main heading)