C33 Icon CTA left aligned

The Icon CTA left aligned component displays content with all elements (icon, title, content) aligned to the left. This straightforward layout makes it ideal for presenting key information in a clean, easy-to-read format.

 

Component requirements

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

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 left aligned 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 left aligned blocks are strictly used with a single call-to-action (CTA).

 

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.