component :: Feature Grid
The .featureGrid component is the classic marketing “three columns of icon + title + text” pattern, composed over the mCSS grid system.
-
Zero JavaScript
Just an unordered list and the grid you already have.
-
Responsive by default
1, 2, then n columns as the viewport grows.
-
Tokenized icons
Icon box size and colors come from the theme.
| File | Description | Source |
|---|---|---|
component.featureGrid.css | Feature grid + item styles | Github |
FeatureGrid.astro, FeatureItem.astro | The Astro components | Github |
--featureItem-* block in default theme | Theme tokens (see table below) | Github |
Depends on .grid (global.grid.css), part of the mCSS core. Icons are yours to bring; Lucide is a great resource.
HTML
One item per <li>: one column on mobile, two from --md, and 2/3/4 (your pick) from --lg.
<ul class="featureGrid grid" col="1" col-md="2" col-lg="3"> <li class="featureItem"> <div class="featureItem_icon" aria-hidden="true"><svg>[…]</svg></div> <h3 class="featureItem_title">Zero JavaScript</h3> <div class="featureItem_text"> <p>Just an unordered list and the grid you already have.</p> </div> </li> <!-- more items… --></ul>The icon box is aria-hidden: feature icons are decoration next to a real heading, so screen readers skip them.
Custom properties
The following custom properties are available in the default theme:
| Property | Description |
|---|---|
--featureItem-icon-box-size | Icon container width/height. |
--featureItem-icon-size | SVG width/height. |
--featureItem-icon-color | Icon (stroke/fill) color. |
--featureItem-icon-background-color | Icon container background. |
--featureItem-icon-border-radius | Icon container radius. |
Astro component
FeatureGrid
| Prop | Type | Default | Description |
|---|---|---|---|
cols | number | 3 | Columns from the --lg breakpoint: 2, 3, or 4. |
class | string | undefined | Additional CSS classes, useful for helper classes. |
FeatureItem
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | undefined | The item’s h3. |
class | string | undefined | Additional CSS classes. |
| Slot | Description |
|---|---|
icon | An SVG icon, rendered in the tokenized icon box. |
| (default) | The item’s body text. |
Examples
-
Two columns
Set
colsfor the large-screen column count. -
No icon required
Skip the
iconslot and the box disappears.
---import FeatureGrid from "../components/FeatureGrid.astro";import FeatureItem from "../components/FeatureItem.astro";import zap from "../assets/icons/zap.svg?raw";---<FeatureGrid cols={2}><FeatureItem title="Two columns"><Fragment slot="icon" set:html={zap} /><p>Set `cols` for the large-screen column count.</p></FeatureItem><FeatureItem title="No icon required"><p>Skip the `icon` slot and the box disappears.</p></FeatureItem></FeatureGrid>-