Timeline Section
Present milestones in a complete page section.
Preview
Import
import { TimelineSection } from "@sigil-ui/components";Usage
<TimelineSection
label="Roadmap"
title="What's shipping next"
events={[
{ date: "Q2 2026", title: "Token diff", description: "Visualize preset deltas." },
{ date: "Q3 2026", title: "Design extract", description: "URL → DESIGN.md." },
{ date: "Q4 2026", title: "Headless cores", description: "All overlays portable." },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Readable label for the component. |
title | string | — | Heading displayed in the component. |
description | string | — | Supporting text below the heading. |
events (required) | TimelineEvent[] | — | Events configuration. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-section-py | Section py |
--s-content-max-narrow | Content max narrow |
--s-page-margin | Page margin |
--s-border | Border |
--s-radius-full | Radius full |
--s-background | Background |
--s-text-muted | Text muted |
--s-primary | Primary |
--s-font-mono | Font mono |
--s-text | Text |