# Generic
A flexible template component for displaying structured content with optional heading, body text, visual media, and action links.

## Screenshots

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

## What it looks like
The Generic component renders as a full-width section with content arranged vertically in a single column. Elements stack in sequence: optional icon, pre-heading, main heading, post-heading, visual media, body text, action links, and additional copy. All content spans the full container width and is positioned using `col-span-full`.

## Typography
- **Icon**: Rendered as a visual element with responsive sizing
- **Pre-heading and Post-heading**: Use `h2` elements with default browser styling
- **Main heading**: Uses dynamic heading level (`h1` for index 0, `h2` for other indices) with size classes determined by `textSize` field via `getSizingInformation` - Small maps to `h3`, Medium to `h2`, Large to `h1`
- **Body text**: Uses `rtf-standard` class for rich text formatting, with optional custom style classes applied
- **Additional copy**: Also uses `rtf-standard` class with separate optional style classes

## Colours
Authors cannot set background or text colours for this component - it inherits colours from the containing section.

## Used fields

| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|----------------|---------------------------|
| id | Symbol | Used for preview field targeting in CMS editing mode | No visual effect, reduces editor functionality |
| index | Number | Determines heading element type (h1 for 0, h2 for others) and image loading priority | Component renders but heading defaults to h2 |
| heading | Symbol | Displays as main heading with dynamic sizing based on textSize | No heading renders |
| body | Rich Text | Renders as formatted content with rtf-standard styling | No body content displays |
| bodyStyles | Multiple Symbol | Applies additional CSS classes to body content (converted to lowercase with dashes) | Body uses only default rtf-standard styling |
| visual | Media | Displays responsive image/video with calculated sizing and priority | No visual media appears |
| links | Reference | Renders as SectionLinks component with action buttons/links | No action links display |
| additionalCopy | Rich Text | Shows as additional formatted text below links | No additional content renders |
| additionalCopyStyles | Multiple Symbol | Applies CSS classes to additional copy (converted to lowercase with dashes) | Additional copy uses only default styling |
| anchor | Symbol | Sets HTML id attribute on section for page anchoring | No anchor point created |
| icon | Media | Displays as visual icon above other content | No icon appears |
| postHeading | Symbol | Shows as h2 element after main heading | No post-heading displays |
| preHeading | Symbol | Renders as h2 element before main heading | No pre-heading appears |
| textSize | Symbol | Controls heading and text sizing (Small/Medium/Large) | Defaults to Medium sizing |
| cmsLabel | Symbol | Used for analytics tracking and component identification | Reduces tracking capability |

## Behaviour
Components render in a fixed vertical sequence regardless of field order. The index determines heading hierarchy and image loading priority for performance. Visual elements use responsive sizing with mobile-first approach. Links component handles both email and standard link modes automatically. All preview field properties are conditionally applied only in CMS editing mode.

## Impact of content changes
- **Adding/removing heading**: Main focal point appears/disappears, affects page structure and SEO
- **Adding/removing visual**: Major layout change as images typically dominate visual hierarchy
- **Adding/removing links**: Call-to-action functionality appears/disappears, affects user engagement
- **Changing textSize**: All text elements scale proportionally, significantly impacts visual weight
- **Adding body or additionalCopy**: Substantial content blocks appear, increasing section height and information density