Introducing the New CTA Link and Icon Link Components

Example of the icon links on a computer screen background
By Jada Gibson
2 min read

The CTA Link and Icon Link components provide visually engaging ways to display multiple links in a flexible grid layout. These components are ideal for presenting groups of related links in three or four columns for improved organization and usability.

  • The CTA Link displays the link inside a card with an arrow indicator. The link itself is the only clickable element.
  • The Icon Link displays the link inside a card paired with a selected icon for additional visual emphasis.

When to Use an Icon Link or CTA Link

Both the CTA Link and Icon Link components are designed to display multiple links in a clean, structured grid. Choosing the right option depends on how much visual emphasis and context your links need.

Use a CTA Link when you need to:

  • Present multiple related links in a simple, streamlined format
  • Provide clear navigation options without additional visual elements
  • Display link sets where the text itself is descriptive enough
  • Maintain a clean, minimal layout with an arrow indicator for action

CTA Links work well for structured navigation sections such as department listings, resource groupings, or quick-access link collections.

Use an Icon Link when you need to:

  • Add visual cues to help users quickly scan and identify content
  • Reinforce meaning with recognizable icons
  • Highlight categories, services, or topics that benefit from visual differentiation
  • Create a more engaging or visually dynamic link section

Icon Links are especially helpful when the audience may benefit from quick visual recognition or when organizing diverse content types.

How to Add a CTA Link

  1. Select CTA Link from the list of components under the Call to Action group.
  2. Add the desired Link Text.
    • Note: Title text is limited to 70 characters
  3. Enter the URL (internal or external link).

Styles

  1. Click the Styles tab.
  2. Click Layout to expand the section.
  3. Choose your Grid Columns layout:
    • Three columns (default) – Recommended for link sets of 3, 6, 9, 12, 15, 18, or 21.
    • Four columns – Recommended for link sets of 4, 8, 10, 14, 18, or 22.

How to Add an Icon Link

  1. Select Icon Link from the list of components under the Call to Action group.
  2. Choose an icon using the Icon Picker widget.
  3. Add the desired Link Text.
    • Note: Title text is limited to 70 characters
  4. Enter the URL (internal or external link).

Styles

  1. Click the Styles tab.
  2. Click Layout to expand the section.
  3. Choose your Grid Columns layout:
    • Three columns (default) – Recommended for link sets of 3, 6, 9, 12, 15, 18, or 21.
    • Four columns – Recommended for link sets of 4, 8, 10, 14, 18, or 22.

Layout Considerations

Both components support three-column (default) and four-column grid layouts.

  • Choose three columns for most standard link groupings.
  • Choose four columns when you have link sets that divide evenly into four or when space allows for a denser layout.

Selecting the appropriate component and layout ensures clarity, visual balance, and a consistent user experience across your site.

Background Colors

We recommend working with a Site Administrator to apply background colors to CTA and Icon Links when you need them to stand out.

Note: Background colors can be applied only within One Column and Card Grid sections.

How to Apply a Background Highlight

  1. Open the Styles tab.
  2. Choose one of the approved background colors:
  • None (default)
  • Blue 100
  • Blue 300
  • Blue 500
  • Blue 700
  • Sand 300
  • Sand 500

Implementation Timeline

The new CTA and Icon Links components will launch by the end of February. We encourage all site editors to review the new process to ensure a smooth transition.

Additional Resources

Co-working Sessions

Need help creating CTA cards and adding background colors? Register for the next Co-working Session for support. 

Register for Co-working Sessions