Library · Content Sections

Content / Vertical Timeline

Vertical chronological timeline of dated entries (distinct from The Plan's 3-step flow). Optional reveal-on-scroll that is reduced-motion aware; entries render fully visible with no JS. Tone via the shared contract.

Figma: Content / Vertical Timeline ↗

Live preview — edit theme bottom-right

---
import TimelineVertical from "../components/figma/TimelineVertical.astro";
---
<TimelineVertical
  heading="Project milestones"
  tone="base-100"
  entries={[
    { date: "Q1 2025", title: "Planning approved", body: "Development application approved by council, clearing the way for construction to begin." },
    { date: "Q3 2025", title: "Construction commences", body: "Site works and foundations underway, with the display suite opening to the public." },
    { date: "Q2 2026", title: "Structure complete", body: "Topping-out reached; facade and internal fit-out progressing on schedule." },
    { date: "Q4 2026", title: "Settlement & handover", body: "Final inspections complete and keys handed to residents." },
  ]}
/>

Props

Name	Type	Required	Description
`heading`	`string;`	—	Optional section heading
`entries`	`TimelineEntry[];`	Yes	Timeline entries, in order
`reveal`	`boolean;`	—	Add a subtle reveal-on-scroll animation (progressive; no-JS shows all) (default: true)
`tone`	`"base-100" \| "base-200" \| "base-300" \| "primary" \| "secondary" \| "neutral";`	—	Background tone — the Figma colour-variant axis

Example with all props

<TimelineVertical
  heading="Project milestones"
  tone="base-100"
  entries={[
    { date: "Q1 2025", title: "Planning approved", body: "Development application approved by council." },
    { date: "Q3 2025", title: "Construction commences", body: "Site works underway; display suite opens." },
  ]}
/>