Icon Card Block

The Icon Card block displays a styled card that combines an icon, title, description, and link into a single visual element. Icon Cards are most commonly used inside a Columns block to display a series of two or three cards in a row.

Why use the Icon Card block

Use the Icon Card block when you want to highlight important links or content areas using a visual card layout.

Common uses include:

  • Linking to key pages or resources
  • Highlighting services, features, or categories
  • Creating navigation shortcuts within a page
  • Displaying a set of related actions in a clean layout

Because the entire card becomes clickable when a link is applied, this block creates a large interaction area that improves usability for both desktop and mobile users.

Note: The Icon Card block is part of a set of card layout blocks, including the Image Card and Image Overlay Card. These blocks function similarly but use different visual styles depending on whether you want to display an icon or image.

How to use the block

Start by adding the Icon Card block to the page. Learn how to add blocks.

Once the block is added, editors typically:

  • Select an icon that represents the card’s purpose
  • Add a title and short description
  • Enter link text for the call-to-action
  • Apply a link to the card using the block toolbar

While the card content is configured in the block settings sidebar, the link itself is applied in the block toolbar.

Block toolbar

The block toolbar appears above the Icon Card block when it is selected.

Available options

  • Alignment: Controls how the card aligns within its container. The alignment can be adjusted when the block is used independently, however, keep is set to “None” when used within columns or other layout blocks.
  • Link: Adds a destination link to the card. When a link is applied, the entire card becomes clickable.

Block settings

Block settings appear in the right sidebar while the Icon Card block is selected.

Icon picker

The Icon Picker allows you to choose and style the icon used in the card.

Click Open Icon Picker to launch the icon selection modal, which includes three tabs:

Icon

Choose the icon you want to display.

  • Browse icons in the grid
  • Use the search field to find icons quickly
  • Select an icon to apply it to the card

Colors

Controls the icon appearance.

  • Icon Color — sets the color of the icon
  • Icon Background Color — sets the background color behind the icon. Applying a background color can help the icon stand out visually.

Dimensions

Controls the size and spacing of the icon container.

  • Container Padding — adds spacing inside the icon container (pixel value). Padding is often used when a background color is applied to create balanced spacing around the icon.
  • Container Size — controls the overall size of the icon container
  • Rounded Icon — toggles a circular container shape

Title

The main heading displayed in the card. This should be short and descriptive so users can quickly understand the purpose of the card.

Description

A short paragraph that provides additional context or explanation for the card. Descriptions should be concise and help users understand what they will find after clicking the card.

Link text

The visible call-to-action text displayed within the card. This text works together with the card title and description to encourage interaction.

Link A11y text

Adds additional descriptive text for screen readers. This text is not visible on the page, but it provides additional context about the link for users of assistive technologies.

Block styles

The Styles tab in the block settings sidebar includes visual layout controls.

Margin

Controls the spacing around the Icon Card block. In most cases, the default spacing should be used. Only adjust margin when additional spacing is needed to improve layout or separation from nearby content.

Accessibility and content structure

The Icon Card block includes several structural considerations.

Heading structure

The Icon Card Title is always output as an H3 heading. Because of this, Icon Cards should appear within sections introduced by an H2 heading.

This helps maintain proper heading hierarchy and supports screen reader navigation.

Tips for editors

Use Icon Cards in groups

Icon Cards are most effective when used in a Columns block to display two or three cards side-by-side. This creates a clean and scannable layout.

Choose meaningful icons

Select icons that reinforce the meaning of the card rather than purely decorative symbols. Consistent icon usage helps users understand content more quickly.

Keep descriptions concise

Icon Cards work best when content is brief and scannable. Avoid long paragraphs inside the card.

Write clear link text

Link text should clearly communicate what users will find after clicking the card. Avoid vague phrases when possible. Instead of using generic text like “Learn more,” consider more descriptive text when appropriate.

Examples: “Explore Services”, “View Program Details”, “Download the Guide”