Timeline Step
FFG-native intervention timeline card with a number, tag, time, and copy.
1IdentificationMonth 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
2InterventionMonth 2–4
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Installation
pnpm dlx shadcn@latest add @ffg/timeline-stepUsage
import { TimelineStep } from "@/components/ui/timeline-step";
<TimelineStep n={1} tag="Identification" time="Month 1">
A short description of this step.
</TimelineStep>A bordered card for a single step in an intervention timeline. Card, border, and text colours use semantic tokens, so it adapts to dark mode.