# Story module
A narrative content block with overlapping image and text layout for storytelling and feature highlights.

## Screenshots

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

## What it looks like
The story module creates a two-column layout on tablet and larger screens with an overlapping design. The visual element appears on the left with rounded corners, while the text content overlays on the right side with a semi-transparent background. On mobile, the layout stacks vertically. Optional elements include a pre-heading above the main content, an icon at the top, and additional copy below the main content area. Links appear as action buttons below the main text.

## Typography
- **Pre-heading**: Uses `h2` class, centered layout
- **Main heading**: Uses dynamic heading level based on section index via `getSizingInformation` - `h1` for first section, `h2` for subsequent sections, with responsive sizing classes
- **Body content**: Rich text with `rtf-standard` base class plus any applied body styles
- **Post-heading**: Uses `h4` class with purple text color
- **Additional copy**: Rich text with `rtf-standard` base class plus any applied additional copy styles

## Colours
Section background and text colours are controlled by the `backgroundColour` and `textColour` fields applied to the full section via the Section wrapper component. Valid palette names: Black, Gray, Deep Purple, Turquoise, PurpleHover, Green Light, Light Gray, Gray 1, Gray 2, Gray 3, Gray 4, Gray 5, Gray 6, Gray 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.

## Used fields

| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|-----------------|---------------------------|
| id | Symbol | Provides unique identifier for preview and tracking | No identifier applied |
| index | Number | Determines heading level and section positioning | Defaults to 0 for heading level calculation |
| heading | Symbol | Displays as main section heading with dynamic sizing | No main heading shown |
| postHeading | Symbol | Shows as purple subheading below main content | No subheading displayed |
| body | Rich Text | Renders as main content text with styling options | No main body content |
| bodyStyles | Multiple Selection | Applies CSS classes to body content for styling | Default rich text styling only |
| visual | Media Reference | Shows as overlapping image on left side | No visual element displayed |
| icon | Media Reference | Displays icon above all other content | No icon shown |
| links | Reference | Renders as action buttons below main text | No action buttons |
| anchor | Symbol | Creates page anchor for navigation | No anchor link available |
| preHeading | Symbol | Shows as centered heading above main heading | No pre-heading displayed |
| additionalCopy | Rich Text | Displays below main content area | No additional content |
| additionalCopyStyles | Multiple Selection | Applies CSS classes to additional copy | Default rich text styling for additional copy |
| textColour | Symbol | Sets text color for entire section | Default text color |
| backgroundColour | Symbol | Sets background color for entire section | Default background |
| cmsLabel | Symbol | Used for analytics tracking and component labeling | No tracking label |

## Behaviour
The component uses the Section wrapper with default spacing and grid layout. Heading levels are automatically determined by the section index - first sections use h1, subsequent sections use h2. The visual element receives priority loading optimization based on the section index. Text content creates an overlapping effect over the visual with relative positioning and z-index layering. All content is responsive and stacks vertically on mobile devices.

## Impact of content changes
- **Adding/removing visual**: Shows or hides the left-side overlapping image and affects overall layout balance
- **Adding/removing heading**: Controls presence of main section title and affects content hierarchy
- **Adding/removing body**: Determines main content area visibility and text overlay positioning
- **Adding/removing links**: Shows or hides action buttons below main content
- **Adding postHeading**: Adds purple subheading for additional content emphasis
- **Changing bodyStyles or additionalCopyStyles**: Modifies text appearance and formatting
- **Adding backgroundColour**: Changes entire section background and may affect text contrast