Feature Frame
Frame a feature illustration with supporting text.
Preview
Import
import { FeatureFrame } from "@sigil-ui/components";Usage
<FeatureFrame
icon={<span aria-hidden className="font-mono text-lg">⌘</span>}
title="One design contract"
description="Every component reads the same complete, validated token schema."
>
<a href="/docs" className="text-sm font-medium text-[var(--s-primary)]">Read the system guide →</a>
</FeatureFrame>Props
| Prop | Type | Default | Description |
|---|---|---|---|
icon | ReactNode | — | Icon or visual element. |
title | string | — | Feature title. |
description | string | — | Feature description. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-card-radius | Card radius |
--s-border-style | Border style |
--s-border | Border |
--s-surface | Surface |
--s-duration-normal | Duration normal |
--s-shadow-md | Shadow md |
--s-radius-md | Radius md |
--s-primary-muted | Primary muted |
--s-primary | Primary |
--s-text | Text |
--s-text-muted | Text muted |