Featured Grid
Give featured content extra emphasis within a grid.
Preview
Import
import { FeaturedGrid } from "@sigil-ui/components";Usage
<FeaturedGrid columns={3} className="w-full">
<div className="min-h-40 bg-[var(--s-surface)] p-[var(--s-space-6)] text-[var(--s-text)]"><strong>Featured system</strong><p className="mt-2 text-sm text-[var(--s-text-muted)]">A larger lead story anchors the composition.</p></div>
<div className="min-h-40 bg-[var(--s-background)] p-[var(--s-space-6)] text-sm text-[var(--s-text)]">Companion</div>
<div className="bg-[var(--s-surface)] p-[var(--s-space-4)] text-sm text-[var(--s-text)]">Tokens</div>
<div className="bg-[var(--s-surface)] p-[var(--s-space-4)] text-sm text-[var(--s-text)]">Presets</div>
<div className="bg-[var(--s-surface)] p-[var(--s-space-4)] text-sm text-[var(--s-text)]">Components</div>
</FeaturedGrid>Props
| Prop | Type | Default | Description |
|---|---|---|---|
featuredRatio | string | 2fr | Ratio of the featured column. |
columns | number | 3 | Number of columns in the secondary grid. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-border | Border |