FeatureGrid

Icon, eyebrow, title and text.

Preview

Design system

Tokens you own

One file drives every color, radius and font.

Safe to publish

A closed contract

Unknown config keys fail the build.

src/examples/feature-grid/example.astro

---
import { FeatureGrid } from "@/presentation/components/site/feature-grid";
---

<FeatureGrid
  features={[
    { icon: "layers", eyebrow: "Design system", title: "Tokens you own", text: "One file drives every color, radius and font." },
    { icon: "shield-check", eyebrow: "Safe to publish", title: "A closed contract", text: "Unknown config keys fail the build." },
  ]}
/>

Add to your site

npx docs-sitekit add feature-grid

It writes these files, and keeps a file you changed:

src/presentation/components/site/feature-grid.tsx

It requires these entries of the registry, which add restores first:

icon

Props

Built from the TypeScript types and the TSDoc comments of the component, so they cannot drift from the code.

Props of FeatureGrid
Key	Type	Default	Allowed values	Description
`features`	readonly FeatureItem[]	required	-	The features, in the order shown.
`brands`	Record<string, BrandGlyph>	-	-	The custom logos of the site, for brand:custom/<name> icons.

Fields of FeatureItem
Key	Type	Default	Allowed values	Description
`icon`	string	required	-	A lucide name in kebab-case, or brand:<slug> for a logo.
`eyebrow`	string	required	-	A short line in mono type over the title.
`title`	string	required	-	The title of the feature.
`text`	string	required	-	One sentence.

Variants and states

A brand logo as the icon

The icon can be brand:<slug>, as in the home page of a project that names its stack.

Static

Built with Astro

Every route is a real HTML file.

Hosting

Published on GitHub Pages

No server to run.

src/examples/feature-grid/brand-icon.astro

---
import { FeatureGrid } from "@/presentation/components/site/feature-grid";
---

<FeatureGrid
  features={[
    { icon: "brand:astro", eyebrow: "Static", title: "Built with Astro", text: "Every route is a real HTML file." },
    { icon: "brand:github", eyebrow: "Hosting", title: "Published on GitHub Pages", text: "No server to run." },
  ]}
/>

About

Features as cards, two columns from the md width. Each has an icon, a short eyebrow, a title and a sentence. The icon can be a brand logo, see Brand logos.

Accessibility

Each feature is an <article> with an h3, so put the grid under a heading of level 2.
The icon is decorative and aria-hidden.
The eyebrow uses the brand token, which reaches AA on the surface of the card in both themes.

Source

feature-grid.tsx

Edit this page

Last updated 5 November 2026