C30 Icon CTA simplified

The C30 Icon CTA Simplified component is a flexible content block that combines an icon with a title, content, and an optional link. It allows for various configurations, making it adaptable for highlighting key information, actions, or messages in a visually engaging way.
 

Component requirements

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

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.
• Mobile behavior: Stacked/2-up grid. Allows to change how icon blocks are displayed on mobile. Default: Stacked. 

Optional:

• Top support copy: Rich text field. Positioned between the top title 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 simplified block

Required:

• CTA style: Button/Link. Default: Button.

Optional:

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

Additional component notes:

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

Content guidelines

Lorem ipsum,
Lorem ipsum.

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/h3), top and bottom support copy all enabled. The icon row is configured for single icon block and includes an icon, support copy, and a CTA button. Mobile behavior: Stacked.

 
Example #2: Wrapper includes title (headline/h3), both support copy containers disabled. The icon row is configured for 2 blocks and includes an icon and support copy. individual icon CTAs are disabled. Mobile behavior: Stacked.

 
Example #3: Wrapper title (headline/h3) as well as both support copy containers disabled. The icon row is configured as 3 blocks and each includes an icon, support copy and CTA link. Mobile behavior: stacked.

 
Example #4:  Wrapper title (headline/h3) as well as top support copy are enabled. The icon row is configured as 4 blocks with first icon block showing only icon enabled, while all other icon blocks utilizing rich text field. Mobile behavior: 2-up grid. 

 
Example #5: Wrapper title (headline/h2) as well as top support copy are enabled. The icon row is configured as 4 blocks with each block showing unique presentation style. Mobile behavior: Stacked. Each icon block consists of:
Icon block 1: Icon enabled, support copy enabled, formatted as H3 headline, CTA disabled
Icon block 2: Icon disabled, support copy enabled, short style paragraph, CTA link enabled
Icon block 3: Icon disabled, support copy enabled, formatted as bulleted list, CTA disabled
Icon block 4: Icon enabled, support copy disabled, CTA button enabled