C07 Promo CTA

The Promo CTA component highlights a single promotional offering, which can include a headline, support copy, and up to two CTAs, with an option for an image. This component helps draw attention to key initiatives, services, or campaigns in a focused and engaging way.
 

Component requirements

Required:

  • Headline: Text field.
  • Title type: H2/H3/H4/P. Default: P.
  • 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.

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:

  • De apocalypsi gorger omero undead survivor dictum mauris.

Content guidelines

Lorem ipsum.
Lorem ipsum.

ADA requirements

If image is enabled, it requires an alt tag.
CTA's need to have a descriptive link text.

Component examples

Example #1: Promo CTA component example with all elements enabled (image, headline, support copy, 2 CTAs). Background set to Wellness blue. Title set to Paragraph. Layout 30/70. Second CTA Solid. Text alignment Left. Image alignment: Left.

placeholder_promo_600x376

C07 Promo CTA title example (set as paragraph)

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

First CTA exampleSecond CTA example

 
Example #2: Promo CTA component example with all elements enabled (image, headline, support copy, 2 CTAs). Background set to Denim blue. Title set to H3. Layout 40/60. Second CTA Outlined. Text alignment Left. Image alignment: Left.

placeholder_promo_600x376

C07 Promo CTA title example 2 (set as H3)

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

First CTA exampleSecond CTA example

 
Example #3: Promo CTA component example with image and headline enabled, support copy disabled. Background set to White smoke. Title set to H2. Layout 50/50. Second CTA Link. Text alignment Left.

placeholder_promo_600x376

C07 Promo CTA title example 3 (set as H2)

First CTA exampleSecond CTA example

 
Example #4: Promo CTA component example with headline and support copy enabled (image disabled). Background set to ACH Orange. Title set to H4. Layout 100 (*no image). Second CTA disabled. Text alignment Center.

C07 Promo CTA title example 4 (set as H4)

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

CTA example (optional)

 
Example #5: Promo CTA component example with headline, support copy, and image enabled. Both CTA's disabled. Title set to H2. Layout 40/60. Text alignment Left. Image alignment: Right.

placeholder_promo_600x376

C07 Promo CTA title example 5 (set as H2)

Duis aute irure dolor in reprehenderit

  1. In voluptate velit esse cillum
  2. Dolore eu fugiat nulla pariatur

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.