About this block

Icon Card is a single focused card. The header row places a tinted circular icon container alongside a title and subtitle on the same baseline, so the glyph and the label read as one unit. Below that sits a short body paragraph, and a footer anchors a call-to-action button flush to the right edge.

The icon, title, subtitle, body copy, and button label are all independent pieces of text and content. You can swap the glyph for any icon in your set, rewrite every line of copy, or remove the footer button entirely without disturbing the rest of the card.

When to use

Reach for this card on a product analytics SaaS features page or onboarding flow where each capability needs a quick visual anchor. It works well when you want to present one idea per tile in a grid: the icon draws the eye, the subtitle gives context, and the button provides a direct next step. Compared to a plain text card, the icon header gives each item a distinct identity without adding visual noise.

A natural flow around it on a Components page:

Before

• A short hero or section heading to introduce the feature set
• Badges to label categories above the grid

After

• Hover Effect Card to add interactivity to adjacent tiles in the same grid
• Buttons for a standalone call-to-action row below the cards

What you can display

The card fits any scenario where a glyph and a short explanation belong together. A few specific uses:

• Feature highlights. Pair each core product capability with a matching icon so users can scan a grid and understand the offering at a glance.
• Onboarding steps. Number or sequence the icons to walk a new user through setup tasks, with the button advancing them to the next action.
• Integration catalog tiles. Represent each connected service with its logo or a category icon, a short description, and a button to configure it.

Tip: keep the subtitle to a single phrase and the body to two or three sentences so the card stays compact in a multi-column grid.