Skip to content

component :: Feature Grid

The feature grid is the classic marketing “three columns of icon + title + text” pattern: .featureItem blurbs on a small-size Tiles list. The layout is container-responsive: columns appear as the nearest size container gets wider, so the count answers the space the grid actually has, not the viewport.

  • Zero JavaScript

    Just an unordered list and the tiles you already have.

  • Responsive by default

    1, 2, then n columns as its container grows.

  • Tokenized icons

    Icon box size and colors come from the theme.

File Description Source
component.featureItem.css Feature item styles Github
FeatureItem.astro The Astro component Github
--featureItem-* block in settings.ui.css Interface tokens (see table below) Github
Tiles The container-responsive layout Github

Depends on Tiles for the layout. Icons are yours to bring; Lucide is a great resource.

Playground

  • Zero JavaScript

    Just an unordered list and the tiles you already have.

  • Responsive by default

    1, 2, then n columns as its container grows.

  • Tokenized icons

    Icon box size and colors come from the theme.

Layout

Tile size
Copied!
<ul class="tiles tiles-sm">
<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 tiles 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 its container 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 .featureItem per <li>, on a .tiles-sm list: small tiles, so its container thresholds sit lower and columns appear sooner than for card-sized ones. The count comes from the width of the column the list sits in; see Tiles for the thresholds and the container rules.

<ul class="tiles tiles-sm">
  <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 tiles 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

The list is the Tiles component with size="sm".

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