# Collection content
A flexible content component for displaying heading, body text, images, and links within a structured section layout.

## Screenshots

| Variant | Preview |
|---------|---------|
| default | ![default](collection-content-default.png) |
| showVisual=false | ![showVisual=false](collection-content-showVisual-false.png) |
| turquoise | ![turquoise](collection-content-turquoise.png) |

## What it looks like
Full-width section with content arranged in a single column spanning the full container width. Elements stack vertically in this order: optional icon, pre-heading, main heading, post-heading, visual image, body text, links, and additional copy. Each element takes the full column width when present.

## Typography
- **Heading**: Uses heading level based on component index - h1 for first component, h2 for subsequent components, with size determined by textSize field (Large=`h1`/`h2`, Medium=`h2`/`h3`, Small=`h3`/`h4`)
- **Pre-heading and post-heading**: Always use `h2` class regardless of position or textSize
- **Body text**: Uses `rtf-standard` class for rich text formatting, with optional bodyStyles modifying appearance
- **Additional copy**: Uses `rtf-standard` class with optional additionalCopyStyles for formatting

## Colours
Authors cannot set section background or text colours for this component type. The component inherits the default theme colours.

## Used fields

| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|-----------------|---------------------------|
| id | Symbol | Used for preview mode field targeting | No visual effect |
| index | Number | Determines heading element level (0=h1, >0=h2) | Defaults to h2 |
| heading | Symbol | Displays as main heading with size based on textSize and index | No heading appears |
| body | Rich Text | Renders as formatted content with rtf-standard styling | No body content appears |
| bodyStyles | Array | Applies additional CSS classes to body text | Body uses default rtf-standard styling only |
| visual | Media | Displays responsive image with priority based on index | No image appears |
| links | Array | Renders as section links with center alignment | No links section appears |
| additionalCopy | Rich Text | Displays as additional formatted content below links | No additional copy appears |
| additionalCopyStyles | Array | Applies CSS classes to additional copy | Additional copy uses default rtf-standard styling |
| anchor | Symbol | Sets section ID for page anchoring | No anchor ID set |
| icon | Media | Displays as visual above all other content | No icon appears |
| postHeading | Symbol | Shows as h2 heading after main heading | No post-heading appears |
| preHeading | Symbol | Shows as h2 heading before main heading | No pre-heading appears |
| textSize | Symbol | Controls heading size (Small/Medium/Large) | Defaults to Medium sizing |
| cmsLabel | Symbol | Used for analytics tracking and component labeling | No tracking label set |

## Behaviour
Component index determines heading hierarchy with first component (index 0) using h1, subsequent components using h2. Image priority is calculated based on index for performance optimization. All content elements are optional and only render when populated. Links include tracking location based on cmsLabel value.

## Impact
- **Adding/removing heading**: Shows/hides main title with appropriate heading level
- **Adding/removing visual**: Shows/hides responsive image with calculated sizing
- **Adding/removing body or additionalCopy**: Shows/hides respective text content sections
- **Adding/removing links**: Shows/hides entire links section with center alignment
- **Changing textSize**: Adjusts heading size across Small/Medium/Large scale
- **Adding bodyStyles or additionalCopyStyles**: Applies additional formatting classes to respective text