Feature Card
ProA content card combining an icon, heading, and description text for showcasing product features in grid layouts. Commonly used on marketing pages, onboarding screens, and feature comparison sections. Supports optional links and badges.
6 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Standard feature card with icon, heading, and description. | Use in feature grids on landing pages and product overviews. |
| Horizontal | Icon and text arranged side by side for compact layouts. | Use in narrow columns or sidebar feature lists. |
| With Image |
Usage Guidelines
Do
Use a consistent icon style across all feature cards in a grid.
Don't
Include too much detail — feature cards are for scanning, not deep reading.
Do
Keep descriptions to 1–2 sentences maximum.
Don't
Mix icon sizes within the same feature grid.
Do
Use a uniform card height within the same row.
Don't
Use feature cards for unrelated content — group by theme.
Code
Design Tokens
Accessibility
- Icons are decorative — use aria-hidden="true" since the heading provides the label.
- If the card links somewhere, use the stretched link pattern for the full-card click target.
- Maintain a logical heading hierarchy within the page context.