Isolation Stack
Illustrate boundaries between stacked system layers.
Preview
Import
import { IsolationStack } from "@sigil-ui/components";Usage
<IsolationStack
layers={[
{ label: "Hardware", width: "100%" },
{ label: "Kernel", width: "78%" },
{ label: "Workload", width: "56%", accent: true },
]}
columns={[{ key: "sigil", label: "Sigil", accent: true }, { key: "other", label: "Other" }]}
rows={[
{ label: "Tokens", values: { sigil: "full", other: "partial" } },
{ label: "Presets", values: { sigil: "full", other: "none" } },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
layers | IsolationLayer[] | — | Stacked isolation layers (outer to inner). |
columns | ComparisonColumn[] | — | Comparison matrix columns. |
rows | ComparisonRow[] | — | Comparison matrix rows. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-success | Success |
--s-warning | Warning |
--s-error | Error |
--s-text-muted | Text muted |
--s-border | Border |
--s-primary | Primary |
--s-surface | Surface |
--s-duration-normal | Duration normal |
--s-ease-out | Ease out |
--s-duration-slow | Duration slow |
--s-text | Text |
--s-duration-fast | Duration fast |