Feature grid
A concise, equal-column feature list: each flat Card centres a consumer-supplied Material Symbols icon in a quiet badge, then a title and description. Composes Grid, Stack, Card, Heading, Text and Icon; it adds no interaction or icon loader.
Experimental · Molecule
Example
Open the standalone example. Static HTML rendered from the Default Storybook story, with generated tokens and the component's own CSS.
When to use
A small set of equally weighted benefits, principles or capabilities needs an icon, title and explanation without an action per item.
Not for: Items need links or controls (use Service Grid), images or media, uneven prominence (use Bento Grid), or an equal-square product wall (use Square Grid).
Parameters
| Name | Type | Required | Default |
|---|---|---|---|
items | FeatureGridItem[] | Yes | — |
headingLevel | 2 | 3 | 4 | 5 | 6 | No | 3 |
Tokens and dependencies
Tokens: spacing-0, spacing-3, color-bg-muted, radius-md.
Builds on: card, grid, stack, heading, text, icon.
Source
Canonical contract: components/feature-grid/SPEC.md. React binding: components/feature-grid/react/FeatureGrid.tsx. Css binding: components/feature-grid/feature-grid.css.