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.

Content guidance

Use where more accent or separation for topics is needed. Borders on all sides provide more impact for important subjects.

• Has a colored border available for the top border and shadowed borders for left, right and bottom borders. If no color is chosen, the top border will not appear.
• Work with design or CMS partner to choose icons and to ensure the correct border color for care delivery brand is used.
• Use consistent formatting on all cards for icons, length of descriptive copy and any other formatting details.
• Heights of cards appear uniform regardless of heights of card contents.
• Use at most three columns on pages with left nav or right rail. Four columns may be used on full-width pages.
• Examples
  • Get ready for your primary care visit
  • Schedule your orthopedic appointment
  • Health and wellness information, Support services, Volunteer opportunities (Note the three different border colors used. This should be done sparingly.)

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.
• The two optional CTAs can be buttons or text links.

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.