Components
FeatureShowcaseSection
Alternating rows of text and media for deep-dive feature explanations.
Import
import { FeatureShowcaseSection } from "@sigil-ui/components";Preview
Usage
<FeatureShowcaseSection
label="Platform"
title="Built for scale"
rows={[
{
label: "Tokens",
title: "519 configurable fields",
description: "Every visual property flows from a central spec.",
media: <img src="/tokens.png" alt="Tokens" />,
actions: [{ label: "Learn more", href: "/docs/tokens" }],
},
{
title: "46 presets",
description: "Switch your entire visual identity in one command.",
media: <img src="/presets.png" alt="Presets" />,
},
]}
/>Odd-numbered rows automatically swap text and media sides.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Uppercase mono label |
title | ReactNode | — | Section heading (omit to hide) |
description | string | — | Supporting text |
rows | FeatureShowcaseRow[] | required | Array of { label?, title, description, media, actions? } |
className | string | — | Additional CSS classes |
Each actions item is { label, href? }. Plus all standard <section> HTML attributes.