Feature Grid
Alternating two-column feature rows with text and visual panes.
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]} /> }]} />Custom gap and row height
<FeatureGrid rows={rows} gap="2px" rowMinHeight={400} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
rows | FeatureRow[] | — | Array of feature rows |
gap | string | "0" | Gap between rows |
rowMinHeight | number | 320 | Minimum row height in px |
className | string | — | Additional CSS classes |
FeatureRow
| Field | Type | Description |
|---|---|---|
heading | string | Row heading |
bullets | string[] | Bullet points |
quote | string | Optional blockquote |
visual | ReactNode | Visual pane content |