C32 Icon CTA colored box

The Icon CTA Colored Box component features a fully colored card that houses an icon, title, and supporting content. The entire box is interactive (clickable), and upon hover, the color scheme reverses, creating an engaging and dynamic experience that draws attention to key actions or information.

Component requirements

Component consists of a wrapper element, along with individual icon cta blocks (C32).

Icon CTA wrapper

Required:

Title type: H2/H3/H4/P. Default: P.
Title alignment: Left/center. Default: Center.
Support copy alignment: Left/center. Default: Center.
Number of columns: Allows to add up to 4 icon blocks. Default: 2.

Optional:

Wrapper Headline: Text field. Appears as the first element inside the wrapper.
Wrapper support copy: Rich text field. Positioned between the top headline and the icon row, allowing users to add additional context or supporting information.
Wrapper bottom support copy: Rich text field. Positioned below the icon row, allows users to add additional context or supporting information.

Icon CTA colored block

Required:

Title type: H2/H3/H4/P. Default: P.

Optional:

Icon: Dropdown. Allows users to choose icon they would like to include.
Headline: Text field.
Support copy: Rich text field.
Card CTA: Text field along with associated link type (internal/external/anchor/email/phone)

Additional component notes:

Icon CTA blocks are strictly used with a single call-to-action (CTA).

Content guidance

Use where colored background brings attention to the subject. May be best used as a full-width component rather than multiple cards because the heights of separate cards appear differently based on heights of card contents.
Work with design or CMS partner to choose icons and to ensure the correct care delivery brand color is used.
Use consistent formatting on all cards for icons, alignment, length of descriptive copy and any other formatting details.
Use at most three columns on pages with left nav or right rail. Four columns may be used on full-width pages.
Example:
- What can we help with?

Headlines:

Up to 40 characters
Specify H2 or H3 to avoid default P formatting

CTA button copy

Use sentence case.
CTAs should be descriptive and clearly state what action users should take. Don’t use general phrases such as “click here” or “read more.”
CTAs should be kept to 30 characters or fewer.
One CTA can be used as a text link.

ADA requirements

Icons must be designated as 'decorative' images.
CTA needs to have descriptive link text (other than 'read more')

Component examples

Example #1: Full wrapper includes title (headline/h2), top and bottom support copy all enabled. The icon row is configured as 1 column, with icon block icon, headline (h3), support copy, and CTA all enabled.