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

quired:

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

• 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).

 

Content guidance

Use when left-justified alignment is desired and an open-looking format or more text options will enhance subjects that need to be highlighted. 

• Use consistent formatting on all cards for icons, alignment, length of descriptive copy and any other formatting details.
• Work with design or CMS partner to choose icons.
• Use at most three columns on pages with left nav or right rail. Four columns may be used on full-width pages.
• Examples:
  • What you’ll find at the Advocate Heart Institute (2-up)
  • Several health assessments (Full-width)

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.

 

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 4 column, with icon block, headline (h3), support copy, and CTA all enabled.