Feature Showcase Section
Combine feature descriptions with a larger visual demonstration.
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]} /> }]} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Readable label for the component. |
title | ReactNode | — | Heading displayed in the component. |
description | string | — | Supporting text below the heading. |
rows (required) | FeatureShowcaseRow[] | — | Rows configuration. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-section-py | Section py |
--s-content-max | Content max |
--s-page-margin | Page margin |
--s-font-mono | Font mono |
--s-primary | Primary |
--s-font-display | Font display |
--s-text | Text |
--s-text-muted | Text muted |
--s-duration-fast | Duration fast |
--s-radius-card | Radius card |
--s-border-muted | Border muted |
--s-surface | Surface |