Feature grid
What the product does, in a few short blocks: an icon in the tone, a title and a sentence each.
Examples
Feature grid
Fast by default
No runtime: plain CSS that the browser already knows how to draw.
Frosted layers
Glass for what floats, flat tints for what you press.
Accessible
State in ARIA, focus always visible, contrast modes handled.
Centred, toned
Free to start
No card needed.
Built for teams
Roles and review.
Everywhere
Edge-hosted.
Anatomy
.features | Auto-fit grid; columns at least φ⁶ rem (--min) wide, so it goes from one to four columns on its own. |
> div | One feature. Its children stack with a small gap and lose their margins. |
> div > i.icon:first-child | Optional. One and a half times larger, in --ae-tone, with a little extra space below. |
> div > h4, p | The title, a step larger than body text, and a muted description. |
API
| Attribute | Values | Description |
|---|---|---|
data-center | boolean | Centres each feature's icon and text. |
data-tone | accentsuccesswarningdangerinfo | Colours the icons. Set it on the grid, or on one feature. |
--min | <length> | Minimum column width. Default φ⁶ ≈ 18rem. |
Accessibility
- The icons are decorative; the title carries the meaning, so no label is needed on the
<i>. - Use a heading level that fits the page outline.
h4is styled here, buth3under a section'sh2is often right; restyle with a utility if needed.