C31 Icon CTA bordered

The Icon CTA bordered component presents content in a card format with the top border highlighted, allowing for easy configuration based on brand style. This component combines an icon, title, and content, offering a visually distinct and engaging way to highlight key information or actions.

Component requirements

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

Icon CTA wrapper

Required:

• Title type: H2/H3/H4/P. Default: P.
• Number of columns: Allows to add up to 4 icon blocks (or 2 blocks in location card configuration. Options include 1/2/3/4/C24 Location cards. Default: 1.

Optional:

• Headline: Text field. Appears as the first element inside the wrapper.
• Top support copy: Rich text field. Positioned between the top headline and the icon row, allowing users to add additional context or supporting information.
• Bottom support copy: Rich text field. Positioned below the icon row, providing space for supplementary details or descriptions.

Icon CTA bordered block

Required:

• Title type: H2/H3/H4/P. Default: P.
• Top border color: Defines border color which appears at the top of the card. None/Denim Blue/Gold/Green/Orange/Peacock/Purple/Wellness Blue. Default: None.
• First CTA style: Button/Link. Default: Button.
• Second CTA style: Button/Link. Default: Button.

Optional:

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

Additional component notes:

• Wrapper content is always set to left
• Depending on user/content needs, a combination of styles can be used within icon row. Please reference examples section below.

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 2 columns, with each icon block using border (denim / gold), icon, headline (h3), support copy, and both CTAs enabled. Both CTAs are set to button style.

Example #2: Wrapper elements (headline, top and bottom support copy) all disabled. The icon row is configured as 3 columns, with each icon block using border (green / orange / peacock), icon, headline (P), support copy, and both CTAs enabled. CTAs are set to button/link.

Example #3: Wrapper elements (headline, top and bottom support copy) all enabled. Bottom support copy includes link (generated via rich text). The icon row is configured as 4 columns, with each icon block showcasing flexibility:

• Icon block 1: Border purple. icon disabled, headline enabled (h3), support copy disabled, first CTA button, second CTA button.
• Icon block 2: Border wellness blue, icon disabled, headline disabled, support copy enabled, first CTA button, second CTA link.
• Icon block 3: Border green, icon enabled, headline enabled (h4), support copy enabled, both CTA's disabled.
• Icon block 4: Border none, icon disabled, headline enabled (p), support copy enabled, both CTA's disabled, links generated via support copy.