Feature Showcase Section
Alternating rows of text and media for deep-dive feature explanations.
Preview
Import
import { FeatureShowcaseSection } from "@sigil-ui/components";Usage
<FeatureShowcaseSection title="A system that stays consistent" rows={[{ title: "Shared tokens", description: "Change a token to update every component that uses it.", media: <CommitGrid weeks={12} responsive data={Array.from({ length: 84 }, (_, i) => ({ date: new Date(Date.UTC(2026, 0, i + 1)).toISOString().slice(0, 10), count: (i * 7) % 13 }))} /> }, { title: "Clear data", description: "Use the same palette across charts and interface controls.", media: <SparkLine data={[4, 7, 5, 10, 9, 14]} /> }]} />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.