# CTA
A call-to-action section with heading, body text, optional visual, and action links to drive user engagement.

## Screenshots

| Variant | Preview |
|---------|---------|
| default | ![default CTA variant](cta-default.png) |
| gray | ![gray CTA variant](cta-gray.png) |

## What it looks like
The CTA component displays content in a centered layout within a 12-column grid. Optional icon spans 2 columns at the start. Heading, pre-heading, and post-heading are centered in columns 3-10. Visual content (if present) occupies columns 4-9. Body text and additional copy span columns 3-10. Action links display as centered buttons at full width.

## Typography
- **Heading**: Uses dynamic sizing based on section index - `h1` class for first section, `h2` for subsequent sections, with sizing adjusted by `getSizingInformation`
- **Pre-heading and Post-heading**: `p-base` class
- **Body text**: Rich text with `rtf-standard rtf-center` classes, plus any custom body style classes applied
- **Additional copy**: Rich text with `rtf-standard rtf-center` classes, plus any additional copy style classes applied

## Colours
Authors cannot set background or text colours for this component. The Section wrapper does not receive CMS colour fields for this component type.

## Used fields

| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|----------------|---------------------------|
| id | Symbol | Creates DOM id attribute for the section | No id attribute applied |
| index | Number | Determines heading hierarchy (h1 for 0, h2 for others) and image priority | Defaults to 0 behavior |
| heading | Symbol | Displays as main heading with dynamic sizing | No heading shown |
| body | Rich Text | Renders as centered rich text content below heading | No body text displayed |
| bodyStyles | Array of Symbols | Applies additional CSS classes to body text | Standard rich text styling only |
| links | Array of Link references | Shows as action buttons below content | No action buttons displayed |
| preHeading | Symbol | Shows as paragraph text above the main heading | No pre-heading text |
| postHeading | Symbol | Shows as paragraph text below the main heading | No post-heading text |
| visual | Media reference | Displays responsive image in center columns | No visual content shown |
| icon | Media reference | Shows icon at top spanning 2 columns | No icon displayed |
| additionalCopy | Rich Text | Renders as centered rich text at bottom of section | No additional copy shown |
| additionalCopyStyles | Array of Symbols | Applies CSS classes to additional copy | Standard rich text styling only |
| anchor | Symbol | Creates page anchor for deep linking | No anchor functionality |
| cmsLabel | Symbol | Used for analytics tracking and component labeling | No specific labeling applied |

## Behaviour
The component renders fields in a specific order: icon, headings group, visual, body, links, additional copy. Links render as standard section buttons. Visual content gets responsive sizing and image priority based on section index. The component wraps content in a Section container with standard spacing and grid behavior.

## Impact of content changes
- **Add/remove heading**: Shows/hides main title with appropriate heading level
- **Add/remove visual**: Shows/hides centered image with responsive behavior  
- **Add/remove links**: Shows/hides action buttons below content
- **Add/remove body**: Shows/hides main descriptive text section
- **Change bodyStyles/additionalCopyStyles**: Applies different visual styling to text content
- **Add/remove icon**: Shows/hides decorative icon at section top
- **Change index**: Affects heading hierarchy and image loading priority