C06 Promo carousel CTA
The Promo carousel CTA is a carousel component that showcases up to three promotional offerings. Each can include a headline, support copy, and up to two CTAs—a button or link that encourages users to take a specific action. An optional image can also be included. This component helps highlight key initiatives, services, or campaigns.
Component requirements
Component consists of a wrapper element (C06), along with individual promo CTA items (C07).
Promo Carousel CTA wrapper
Required:
- Slide timing: Time delay between slides. Default: 6.
- Background Color: Wellness blue/ Denim blue / White smoke / ACH orange / CCHA Purple. Default: Wellness blue.
- Layout: 30/70, 40/60, 50/50, 100 (no image). Default: 30/70.
- Text alignment: Left/Center. Default: left.
- Image side: Left/Right. Default: Left
- Second CTA style: Solid/Outlined/Link. Default: Solid.
Promo CTA items
Required:
- Headline: Text field.
- Title type: H2/H3/H4/P. Default: P.
Optional:
- Image: Visual element that is positioned either to the left or right of the content
- Supporting copy: Rich text field. Allows users to add additional content
- First CTA link: Text field along with associated link type (internal/external/anchor/email/phone)
- Second CTA link: Text field along with associated link type (internal/external/anchor/email/phone)
Additional component notes:
- Up to 3 max items are allowed in the carousel.
- Default time between slides is 6 seconds.
- Carousel controls are automatically generated. This includes Left, Right, Play/Stop, Pagination.
- Promo items with image variant will always have content aligned to the left.
- Regardless of image position (left/right), on a mobile device image is always positioned on top of content and spans 100% container width.
- Regardless of settings on individual slides, all slides will inherit theme set on the wrapper. Individual items can still be configured with different headings type and display options. It is highly recommended that consistency is kept throughout the slides, ie. All banners are using an image, all banners do not have an image, all content aligned to left, all content aligned to center.
Content guidelines
Lorem ipsum
Lorem ipsum
ADA requirements
Navigating between carousel items must be operable by keyboard.
Users need to have ability to pause the carousel (in the form of a clickable element).
If image is enabled, it requires an alt tag.
CTA's need to have a descriptive link text.
Each header in the carousel has unique text.
Component examples
Example: Promo carousel CTA example showing component in following configuration:
- Wellness Blue theme selected (all individual slides will be overwritten to that style).
- Text alignment is set to Center (all individual slides will be overwritten to that style).
- First slide: Headline is configured as H2, support copy enabled, CTA disabled.
- Second slide: Headline is configured as H3, support copy disabled, CTA enabled. Image is enabled and image position is set to left.
- Third slide: Headline is configured as P, support copy disabled, both CTAs enabled (second CTA set as a outlined)
