Icon Card
A card led by a single icon above a short title and blurb. Use it for feature grids, service lists, or steps where a glyph anchors each point made.
A card led by a single icon above a short title and blurb. Use it for feature grids, service lists, or steps where a glyph anchors each point made.
Search blocks by description or jump to a page.
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.
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
After
The card fits any scenario where a glyph and a short explanation belong together. A few specific uses:
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.