Feature Section
Introduce a product capability with text and visual content.
Preview
Import
import { FeatureSection } from "@sigil-ui/components";Usage
<FeatureSection
label="WHY SIGIL"
title="Edit tokens, not components"
description="Change one value, every consumer updates."
features={[
{ title: "Token-driven", description: "519 fields compile to CSS custom properties." },
{ title: "46 presets", description: "Switch the entire visual identity in one command." },
{ title: "Agent-friendly", description: "MDX-first DESIGN.md you can hand to any LLM." },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Readable label for the component. |
title (required) | ReactNode | — | Heading displayed in the component. |
description | ReactNode | — | Supporting text below the heading. |
features (required) | FeatureItem[] | — | Features configuration. |
columns | 2 | 3 | 4 | — | Columns configuration. |
align | "left" | "center" | — | Align configuration. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-section-py | Section py |
--s-content-max | Content max |
--s-page-margin | Page margin |
--s-radius-card | Radius card |
--s-border-muted | Border muted |
--s-surface | Surface |
--s-duration-fast | Duration fast |
--s-border | Border |
--s-radius-md | Radius md |
--s-primary-muted | Primary muted |
--s-primary | Primary |
--s-text | Text |