Feature Frame Section
Present a feature in a structured, illustrated page section.
Preview
Import
import { FeatureFrameSection } from "@sigil-ui/components";Usage
<FeatureFrameSection
className="!px-0 !py-[var(--s-section-padding-compact)]"
label="Architecture"
heading="One system, end to end"
features={[
{ label: "CONSTRAINTS", headline: "Tokens control every visual property.", points: ["Complete schema", "Validated output"], diagram: <FeatureMiniDiagram variant="layer-stack" size={120} /> },
{ label: "COMPOSITION", headline: "Components inherit the active identity.", points: ["No local color drift", "Predictable interaction"], diagram: <FeatureMiniDiagram variant="hub-spoke" size={120} />, reversed: true },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Section label above heading. |
heading | string | — | Section heading. |
features | FeatureFrameRowProps[] | — | Feature rows. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-border | Border |
--s-primary | Primary |
--s-text | Text |
--s-duration-normal | Duration normal |
--s-ease-out | Ease out |
--s-ease-default | Ease default |
--s-text-muted | Text muted |
--s-duration-fast | Duration fast |
--s-radius-full | Radius full |
--s-duration-slow | Duration slow |