# Rich text

A flexible content component for displaying text, media, and links with optional rich formatting and multiple content sections.

## Screenshots

| Variant | Preview |
|---------|---------|
| default | ![default](http://localhost:3016/cms/screenshot?file=components%2Frich-text-default.png) |
| lightGray | ![lightGray](http://localhost:3016/cms/screenshot?file=components%2Frich-text-lightGray.png) |

## What it looks like

The component renders as a full-width section with content spanning the entire column grid. Content flows vertically in this order: optional icon, pre-heading text, main heading, post-heading text, body rich text, visual media, links, and additional copy rich text. Each element takes the full column width when present. The Section wrapper provides background colour and spacing.

## Typography

- Main heading uses `h1` class for first section (index 0), `h2` class for subsequent sections
- Pre-heading and post-heading use default paragraph styling
- Body rich text applies `rich-text` class with any specified body styles as additional CSS classes
- Additional copy rich text applies `rich-text` class with any specified additional copy styles as additional CSS classes
- Typography sizing follows standard heading hierarchy based on section position

## Colours

Background colour applies to the full section via the Section wrapper. Authors can set `backgroundColour` field using these palette names: Black, Gray, Deep Purple, Turquoise, PurpleHover, Green Light, Light Gray, Gray 1-8, Gray Line, Backdrop Dark, Purple Dark, Green, Red, Purple, Yellow, Teal, Orange, Blue, Secondary Deep Purple, Accessible Purple, Accessible Teal, Light Purple, Light Yellow, Light Teal, Light Orange, Light Blue, Pale Purple, Pale Yellow, Pale Teal, Pale Orange, Pale Blue, White. Authors cannot set text colour as this component does not have a `textColour` field.

## Used fields

| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|-----------------|---------------------------|
| id | Symbol | Provides unique identifier for preview editing | No preview editing capabilities |
| index | Number | Determines heading level (0 = h1, others = h2) and image priority | Uses default heading level and image priority |
| heading | Symbol | Displays as main heading with appropriate level | No main heading shown |
| body | Rich Text | Renders as formatted rich text content | No body content displayed |
| bodyStyles | Multiple Symbol | Applies additional CSS classes to body text | Body uses default rich-text styling only |
| visual | Media reference | Shows responsive image/media below body text | No visual content displayed |
| links | Reference | Renders section links component | No links shown |
| additionalCopy | Rich Text | Displays extra formatted content at bottom | No additional content shown |
| additionalCopyStyles | Multiple Symbol | Applies additional CSS classes to additional copy | Additional copy uses default rich-text styling only |
| anchor | Symbol | Sets section anchor/ID for navigation | No anchor link available |
| icon | Media reference | Displays icon at top of section | No icon shown |
| postHeading | Symbol | Shows text paragraph after main heading | No post-heading text |
| preHeading | Symbol | Shows text paragraph before main heading | No pre-heading text |
| backgroundColour | Symbol | Sets section background colour | Uses default/transparent background |
| cmsLabel | Symbol | Used for analytics tracking and component labeling | No tracking context provided |

## Behaviour

The component renders all content elements in a fixed vertical order when present. The main heading element type depends on the section index - first section uses h1, subsequent sections use h2. Images receive priority loading based on section index. Style classes from bodyStyles and additionalCopyStyles arrays are converted to lowercase with spaces replaced by hyphens before application. All content receives preview editing capabilities when in CMS preview mode.

## Impact of content changes

- **Adding/removing heading**: Shows/hides main section heading
- **Adding/removing body or additionalCopy**: Shows/hides rich text content sections
- **Adding/removing visual**: Shows/hides media content
- **Adding/removing links**: Shows/hides navigation links section
- **Adding/removing icon**: Shows/hides top icon
- **Adding/removing pre/postHeading**: Shows/hides supplementary text
- **Changing backgroundColour**: Updates entire section appearance
- **Changing style arrays**: Modifies text formatting and appearance