Feature Grid
Arrange product features in a responsive grid.
Preview
Import
import { FeatureGrid } from "@sigil-ui/components";Usage
<FeatureGrid rowMinHeight={180} rows={[{ heading: "One source of truth", bullets: ["Shared colors and spacing", "Consistent component states"], visual: <CommitGrid weeks={12} responsive data={Array.from({ length: 84 }, (_, i) => ({ date: new Date(Date.UTC(2026, 0, i + 1)).toISOString().slice(0, 10), count: (i * 7) % 13 }))} /> }, { heading: "Reusable building blocks", bullets: ["Compose with familiar React components", "Adjust the preset in one place"], visual: <SparkLine data={[4, 7, 5, 10, 9, 14]} /> }]} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
rows | FeatureRow[] | — | — |
gap | string | — | — |
rowMinHeight | number | 320 | Min-height for each row in px. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-border-muted | Border muted |
--s-border-style | Border style |
--s-card-padding | Card padding |
--s-font-display | Font display |
--s-text | Text |
--s-text-secondary | Text secondary |
--s-text-subtle | Text subtle |
--s-text-muted | Text muted |
--s-border | Border |
--s-surface | Surface |