Blueprint Grid Section
Blueprint-style 2-column feature grid inspired by Dedalus' BlueprintFeatures. Each card scroll-reveals with staggered delay; contains a diagram viewport, spec table, and callout chips.
Preview
Import
import { BlueprintGridSection } from "@sigil-ui/components";Usage
<BlueprintGridSection
className="!px-0 !py-[var(--s-section-padding-compact)]"
label="System map"
heading="From specification to interface"
cards={[
{ title: "Token contract", subtitle: "One schema for every visual decision.", diagram: <FeatureMiniDiagram variant="layer-stack" size={72} />, specRows: [{ label: "FIELDS", value: "519" }], callouts: ["typed", "validated"] },
{ title: "Preset compiler", subtitle: "Complete identities with no missing values.", diagram: <FeatureMiniDiagram variant="hub-spoke" size={72} />, specRows: [{ label: "PRESETS", value: "46" }], callouts: ["portable", "live"] },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Section label. |
heading | string | — | Section heading. |
cards | BlueprintCardData[] | — | Cards to render in a 2-column staggered grid. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-border | Border |
--s-surface | Surface |
--s-duration-fast | Duration fast |
--s-primary | Primary |
--s-ease-out | Ease out |
--s-ease-default | Ease default |
--s-background | Background |
--s-text-muted | Text muted |
--s-text | Text |