# Visual

A full-width visual content component for displaying images with optional headings, body text, and links in a centered layout.

## Screenshots

| Variant | Preview |
|---------|---------|
| default | ![default](default-visual.png) |
| gray1 | ![gray1](gray1-visual.png) |

## What it looks like

A vertically stacked section with all content centered on laptop screens and spanning the full width. Elements appear in this order: icon (if present), pre-heading, main heading, post-heading, body text, links, main visual, and additional copy. The main visual takes up the full column span with rounded corners and overflow hidden. Text elements are center-aligned on laptop screens.

## Typography

- **Heading**: Uses dynamic sizing based on `textSize` and section `index` via getSizingInformation - defaults to `h2` class for Medium text size, with the HTML element being h1 for first section (index 0) or h2 for subsequent sections
- **Pre-heading and Post-heading**: Always use h2 HTML elements with default styling
- **Body text**: Uses `rtf-standard` class with any additional styles from `bodyStyles` field converted to lowercase kebab-case classes
- **Additional copy**: Uses `rtf-standard` class with any additional styles from `additionalCopyStyles` field converted to lowercase kebab-case classes

## Colours

Authors cannot set background and text colours for this component type. The Section wrapper does not receive CMS colour fields for Visual components.

## Used fields

| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|-----------------|---------------------------|
| heading | Symbol | Displays as main heading with dynamic typography sizing | No main heading appears |
| body | Rich Text | Displays centered body content with rtf-standard styling | No body text appears |
| bodyStyles | Multiple references | Adds kebab-case CSS classes to body text styling | Body uses only rtf-standard base styling |
| visual | Media reference | Displays as full-width rounded visual with responsive sizing | No main visual appears |
| links | Multiple references | Renders as SectionLinks component with center justification on laptop | No links section appears |
| additionalCopy | Rich Text | Displays centered additional content below the main visual | No additional copy appears |
| additionalCopyStyles | Multiple references | Adds kebab-case CSS classes to additional copy styling | Additional copy uses only rtf-standard base styling |
| anchor | Symbol | Sets HTML id attribute on the section element | No anchor link available for the section |
| icon | Media reference | Displays small icon visual above other content | No icon appears |
| postHeading | Symbol | Shows h2 heading after main heading | No post-heading appears |
| preHeading | Symbol | Shows h2 heading before main heading | No pre-heading appears |
| textSize | Reference | Controls typography scale via getSizingInformation (Small/Medium/Large) | Defaults to Medium sizing |
| cmsLabel | Symbol | Used for analytics tracking context | No tracking label applied |

## Behaviour

The component renders elements conditionally - only fields with content appear in the layout. Visual elements use responsive sizing with image priority calculated based on section index. All text content is center-aligned on laptop screens and spans the full column width. The main visual gets rounded corners and overflow hidden styling. Links component includes tracking location from cmsLabel field.

## Impact

- **Add/remove heading**: Main heading section appears/disappears with appropriate typography sizing
- **Add/remove visual**: Full-width image section appears/disappears from layout
- **Add/remove body or additionalCopy**: Respective text sections appear/disappear with rtf-standard styling
- **Add/remove links**: Button/link section appears/disappears with center alignment
- **Change textSize**: All typography scales up/down according to Small/Medium/Large sizing rules
- **Add/remove icon**: Small icon appears/disappears above main content
- **Add/remove pre/postHeading**: Additional h2 headings appear/disappear around main heading