Introducing the New Icon Card Component

Brand Refresh

Layout illustration of a section header and card grid
By Kelsi Collins
2 min read

As part of our ongoing brand refresh and design enhancements, we’re excited to introduce the Icon Card—a flexible, visually engaging component designed to improve usability and highlight key actions across your website.

To align with our updated visual identity, the Icon component will be phased out. We encourage all site owners and content editors to use the new Icon Card or CTA Card for call-to-action needs going forward.

Icon Card Example

Icon card grid example

Icon Card Layout

Place Icon Cards on homepages and top-level pages to present clear navigational choices with visual cues.

Use Case: Place Icon Cards on homepages and top-level pages to present clear navigational choices with visual cues.

Layout and Components:

  • Card Grid Section – Organizes multiple cards in a structured, grid-like layout
  • Section Header – Introduces the card grid with a title and optional teaser
  • Icon Card – Individual cards containing an icon, title, teaser, and button

Icon Card Elements

Content 

Each Icon Card includes:

  • Icon – A small graphic representing an idea, object, or action
  • Title – Short, action-oriented heading (max 70 characters)
  • Teaser – Brief description providing context (max 300 characters)
  • Button – Clear, accessible call-to-action (link text max 45 characters)

Note: These fields are required to ensure a consistent visual layout.

Styles

Adjust header levels (H2 → H3) to maintain proper page hierarchy

What This Means for You

Existing Icon components will lose current styling to align with the brand update.

Recommended actions:

  • Replace old Icon components with Icon Cards
  • Use Icon Cards or CTA Cards for new call-to-action elements
  • Organize multiple Icon Cards into a Card Grid on top-level pages

How to Add Icon Cards

1. Add a Cards Grid Section

  • Click the Edit link at the top of the page.
  • Place your cursor where you want the cards.
  • Click the plus icon → Select Cards Grid.

2. Add a Section Header

  • Add a Section Header above your cards.
  • (Optional) Add a teaser for supporting context.
  • In Styles, set the header level to H2.

3. Add CTA Cards

  • Place your cursor below the Section Header and add a Icon Card.
  • Select an Icon from the dropdown.
  • Add a Title (max 70 characters).
  • Add a Teaser (max 300 characters).
  • Configure the Button:
    • URL: Select a piece of content or enter an internal/external path
    • Link Text: Provide a clear action, e.g., “Visit the ABC Lab” (avoid generic text)

4. Add Additional Icon Cards

  • Add at least two more cards (3, 6, or 9 recommended for visual balance).

Background Colors

  • Work with a Site Administrator to apply background colors for emphasis.
  • Available only in One Column and Card Grid sections.

Background Color Options: 

  • None (default)
  • Blue 100 / 300 / 500 / 700
  • Sand 300 / 500
Brand color palette and names of colors

Implementation Timeline

  • Launch Date: December 15
  • Review the new process ahead of the launch to ensure a smooth transition.

Additional Resources

Co-working Sessions

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

Register for Co-working Sessions