# CTA with email
A call-to-action section with an email signup form instead of regular action buttons.

## Screenshots

| Variant | Preview |
|---------|---------|
| default | ![default](cta-with-email-default.png) |
| gray | ![gray](cta-with-email-gray.png) |
| light gray | ![light gray](cta-with-email-light-gray.png) |

## What it looks like
The component displays content in a centered layout within a 12-column grid. An optional icon spans 2 columns at the top. The heading group (preHeading, heading, postHeading) spans columns 3-10 and is center-aligned. If present, a visual image appears in columns 4-9 with rounded corners. The main body text spans columns 3-10 with center alignment. Instead of action buttons, an email signup form appears in columns 3-10. Optional additional copy follows at the bottom in columns 3-10.

## Typography
- **heading**: Uses heading level based on section index via `getSizingInformation` (h1 for first section, h2 for others) with `h3` styling class and dynamic sizing
- **preHeading**: Uses `p-base` class
- **postHeading**: Uses `p-base` class  
- **body**: Rendered as rich text with `rtf-standard rtf-center` classes plus any applied body styles
- **additionalCopy**: Rendered as rich text with `rtf-standard rtf-center` classes plus any applied additional copy styles

## Colours
Authors cannot set background or text colours for this component type. The component uses the default styling without CMS-controlled colour fields.

## Used fields

| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|-----------------|---------------------------|
| id | Symbol | Used for preview field identification | No preview field identification |
| index | Number | Determines heading level and image priority | Defaults to 0 for heading level and image priority |
| heading | Symbol | Displays as main heading with dynamic sizing | No main heading appears |
| body | Rich Text | Renders as centered rich text content | No body content appears |
| bodyStyles | Multiple Selection | Applies additional CSS classes to body content | Body uses only default styling |
| links | Reference (multiple) | First link becomes email form submission URL and button text | Shows "Email link is required" error message |
| preHeading | Symbol | Displays above main heading | No pre-heading content |
| postHeading | Symbol | Displays below main heading | No post-heading content |
| visual | Media | Shows responsive image with rounded corners | No visual content appears |
| icon | Media | Displays icon at top of section | No icon appears |
| additionalCopy | Rich Text | Renders below email form | No additional copy appears |
| additionalCopyStyles | Multiple Selection | Applies CSS classes to additional copy | Additional copy uses default styling |
| anchor | Symbol | Sets section ID for anchor linking | No anchor functionality |
| cmsLabel | Symbol | Used for analytics tracking and component labeling | No component labeling or tracking |

## Behaviour
The component requires an email link in the links field - without it, an "Email link is required" error displays. The first link's href becomes the form submission URL, and the link text becomes the button label (falling back to link name or "Subscribe"). All other links are ignored. The heading level adjusts based on section index: h1 for index 0, h2 for others. Image priority calculation uses the index for performance optimization. Body and additional copy styles are converted to CSS classes by lowercasing and replacing spaces with hyphens.

## Impact
- **Add/remove heading**: Main section title appears/disappears
- **Add/remove links**: Email form appears/error message shows
- **Add/remove body**: Main descriptive text appears/disappears  
- **Add/remove visual**: Section image appears/disappears
- **Add/remove icon**: Top icon appears/disappears
- **Change links[0] text**: Email button label changes
- **Change links[0] href**: Form submission destination changes
- **Add/remove additionalCopy**: Bottom text section appears/disappears