# Feature card
A card-style component displaying a heading, body text, and visual in an overlapping layout with optional links and subheadings.

## Screenshots

| Variant | Preview |
|---------|---------|
| default | ![default](default-feature-card.png) |
| lightTeal | ![lightTeal](lightTeal-feature-card.png) |

## What it looks like
The component displays content in a two-column tablet layout with a visual on the left (4 columns wide) and text content on the right (5 columns wide). On mobile, it stacks vertically. The visual has rounded corners and the text content overlaps it with a background. Optional elements include an icon at the top, pre-heading above the main heading, and additional copy below the main content area.

## Typography
- **heading**: Uses dynamic heading levels based on section index via `getSizingInformation` (h1 for first section, h2 for subsequent sections) with `h2` class and responsive sizing
- **preHeading**: Uses h2 element with center alignment
- **body**: Rich text content with `rtf-standard` class plus any custom body styles applied
- **postHeading**: Uses h4 element with `h4` class and purple text color
- **additionalCopy**: Rich text content with `rtf-standard` class plus any custom additional copy styles applied

## Colours
Background and text colours are set by the `backgroundColour` and `textColour` fields and apply to the full section container via the Section wrapper. Valid palette names include Black, White, Deep Purple, Turquoise, Green, Purple, Yellow, Teal, Orange, Blue, Light Purple, Light Yellow, Light Teal, Light Orange, Light Blue, Pale Purple, Pale Yellow, Pale Teal, Pale Orange, Pale Blue, and their variants.

## Used fields

| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|-----------------|---------------------------|
| id | Symbol | Provides unique identifier for preview helpers | No preview targeting available |
| index | Number | Determines heading level and sizing via getSizingInformation | Uses default sizing (index 0) |
| heading | Symbol | Displays as main heading with dynamic sizing | No main heading shown |
| postHeading | Symbol | Shows as purple h4 subheading below main content | No subheading displayed |
| body | Rich Text | Renders as rich text content in the text area | No body content shown |
| bodyStyles | Multiple Symbol | Applies additional CSS classes to body content | Only default rtf-standard styling |
| visual | Media | Shows responsive image on left side with rounded corners | No visual element displayed |
| icon | Media | Displays icon above all other content | No icon shown |
| links | Multiple Reference | Renders as SectionLinks component below text content | No action links available |
| anchor | Symbol | Sets section ID for navigation | No anchor point created |
| preHeading | Symbol | Shows as h2 above main heading | No pre-heading displayed |
| additionalCopy | Rich Text | Displays rich text below main content area | No additional copy shown |
| additionalCopyStyles | Multiple Symbol | Applies CSS classes to additional copy | Only default rtf-standard styling |
| textColour | Symbol | Sets text color for entire section | Uses default text color |
| backgroundColour | Symbol | Sets background color for entire section | Uses default background |
| cmsLabel | Symbol | Used for analytics tracking and component labeling | No tracking context |

## Behaviour
The component uses a tablet-responsive layout that switches from side-by-side (visual left, text right) to stacked on mobile. Content renders in order: icon, pre-heading, main heading, visual/text area with body and post-heading and links, then additional copy. The visual receives priority loading based on the index position. All rich text fields support the full RTF rendering pipeline.

## Impact of content changes
- **Add/remove heading**: Main focal point appears/disappears with responsive typography sizing
- **Add/remove visual**: Left column image appears/disappears, affecting overall layout balance
- **Add/remove body**: Primary text content in right column appears/disappears
- **Add/remove links**: Call-to-action buttons appear/disappear below body text
- **Add/remove postHeading**: Purple subheading appears/disappears in text area
- **Add/remove backgroundColour**: Section background changes from default to specified color
- **Add/remove preHeading**: Centered heading above main heading appears/disappears