Skip to content

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 settings.ui.css Interface 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.

Playground

  • 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.

Layout

Columns (from --lg)
Copied!
<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>
<li class="featureItem">
  <div class="featureItem_icon" aria-hidden="true"><svg>[…]</svg></div>
  <h3 class="featureItem_title">Responsive by default</h3>
  <div class="featureItem_text">
    <p>1, 2, then n columns as the viewport grows.</p>
  </div>
</li>
<li class="featureItem">
  <div class="featureItem_icon" aria-hidden="true"><svg>[…]</svg></div>
  <h3 class="featureItem_title">Tokenized icons</h3>
  <div class="featureItem_text">
    <p>Icon box size and colors come from the theme.</p>
  </div>
</li>
</ul>

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 settings.ui.css:

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.
titleClass string undefined Extra classes added to .featureItem_title.
iconClass string undefined Extra classes added to .featureItem_icon.
Slot Description
icon An SVG icon, rendered in the tokenized icon box.
(default) The item’s body text.

Examples