# Rail CTA
A card-style call-to-action component with optional visual background, heading, body text, and action links.

## Screenshots

| Variant | Preview |
|---------|---------|
| default | ![default](default-rail-cta.png) |
| paleYellow | ![paleYellow](pale-yellow-rail-cta.png) |

## What it looks like
A rounded card with shadow that displays either a background visual or solid colour background. When a visual is present, it covers the full card area with text content overlaid in a padded section at the bottom. Without a visual, the card shows as a solid colour background. Content includes an optional heading, post-heading line, body text, and action links, all contained within the padded content area.

## Typography
- **heading**: Uses `h5` class (24px)
- **postHeading**: Uses `p-sm` class (14px) 
- **body**: Uses `p-sm` class (14px) via RtfOrString component

## Colours
Background and text colours apply to the card itself when no visual is present. 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 component identifier for preview and styling | No identifier available |
| index | Number | Determines image loading priority when visual is present | Uses default priority (0) |
| heading | Symbol | Displays as main heading using h5 styling | No heading shown |
| visual | Media | Shows as full-card background image with object-cover | Card displays with solid colour background instead |
| cmsLabel | Symbol | Used for analytics tracking on links and visual | No tracking label provided |
| postHeading | Symbol | Shows as supporting text below heading | No supporting text displayed |
| body | Rich Text | Renders as formatted body content below post-heading | No body text shown |
| links | Array | Displays action links at bottom of content area | No action links available |
| backgroundColour | Symbol | Sets card background colour when no visual present | Uses default styling |
| textColour | Symbol | Sets text colour for content when no visual present | Uses default text colour |
| hexColor | Symbol | Custom hex colour override for background when no visual | Falls back to backgroundColour or default |
| anchor | Symbol | Sets HTML id attribute on card container | No anchor link target |

## Behaviour
The component renders as either a visual-based card or colour-based card depending on whether the visual field is populated. When visual is present, the image covers the entire card and colour fields are ignored. Links section only appears when links array contains items. The component can be used both as a standalone section or embedded within other components.

## Impact of content changes
- **Adding/removing visual**: Switches between image background and solid colour background modes
- **Adding/removing heading**: Shows/hides main card title
- **Adding/removing links**: Shows/hides action links section at bottom
- **Changing backgroundColour**: Updates card background when no visual present
- **Adding body content**: Expands content area with formatted text below heading