# Content
A flexible layout component for displaying text content with optional visuals, supporting various combinations of headings, body text, images, and action links.

## Screenshots

| Variant | Preview |
|---------|---------|
| default | ![default](default-content.png) |
| gray | ![gray](gray-content.png) |
| light gray | ![light gray](light-gray-content.png) |

## What it looks like
The Content component uses a responsive grid layout within a Section wrapper. When both text and visual content are present, text content spans the left 5 columns on laptop screens while visual content occupies the right 7 columns. When no visual is present but additional copy exists, the additional copy moves to the visual area creating a two-column text layout. All content spans the full width on smaller screens. Visual elements are rounded and the component supports multiple additional visuals in a responsive grid below the main content.

## Typography
- Heading uses `h3` class and renders as h1 element when index is 0, h2 otherwise
- Pre-heading uses `h5` class in a paragraph element
- Post-heading uses `h4` class in a paragraph element
- Body and additional copy use `p-rich-text rtf-content` classes with optional style modifiers
- Body and additional copy styles are converted to CSS classes by lowercasing and replacing spaces with hyphens

## Colours
Authors cannot set background or text colours for this component. The Section wrapper may receive colours from its parent context.

## Used fields

| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|-----------------|---------------------------|
| id | Symbol | Used for preview field props identification | No preview props applied |
| index | Number | Determines heading element type (h1 for 0, h2 otherwise) | Uses default h2 element |
| heading | Symbol | Displays as main heading with h3 styling | No heading shown |
| body | Rich Text | Shows as formatted text content, positioning varies by layout | No body text displayed |
| bodyStyles | Array | Applies CSS classes to body text (lowercase, spaces to hyphens) | Default styling only |
| visual | Media | Displays rounded visual in right column or full width | No primary visual shown |
| links | Array | Renders action links below text content | No links displayed |
| additionalCopy | Rich Text | Shows as secondary text, position depends on visual presence | No additional text |
| additionalCopyStyles | Array | Applies CSS classes to additional copy | Default styling for additional copy |
| anchor | Symbol | Sets section ID for navigation | No anchor link available |
| icon | Media | Displays small visual above heading | No icon shown |
| postHeading | Symbol | Shows secondary heading below main heading | No post-heading text |
| preHeading | Symbol | Displays intro text above main heading | No pre-heading text |
| cmsLabel | Symbol | Used for analytics tracking and component identification | No tracking label |
| otherVisuals | Array | Shows additional images in responsive grid below content | No additional visuals |

## Behaviour
The layout dynamically adjusts based on content presence. When both visual and body text exist, body text appears in the left column alongside heading elements. When visual is absent but additional copy is present, additional copy moves to the visual column creating a side-by-side text layout. Otherwise, body and additional copy span the full width. Other visuals always appear in a separate responsive grid with 1-4 columns depending on screen size. All visual elements include rounded corners and overflow handling.

## Impact
- Adding/removing visual: Changes body text from full-width to left-column layout
- Adding additional copy without visual: Creates two-column text layout with additional copy on right
- Adding other visuals: Displays responsive image grid below main content
- Adding heading with index 0: Renders as h1 element instead of h2
- Adding body styles or additional copy styles: Applies corresponding CSS classes to text formatting
- Adding icon: Displays small visual above all text content
- Adding pre/post headings: Shows additional text elements above/below main heading