A vertical timeline for displaying chronological content. Uses a parent/child slot pattern with Timeline as the container and TimelineItem children. Adapted from the Flowbite default timeline pattern.
File: src/core/components/ui/Timeline.astro
File: src/core/components/ui/TimelineItem.astro
Props — Timeline
| Prop | Type | Default | Notes |
|---|---|---|---|
class | string | — | Additional CSS classes |
Props — TimelineItem
| Prop | Type | Default | Notes |
|---|---|---|---|
title | string | required | Item title |
date | string | — | Date string displayed above the title |
class | string | — | Additional CSS classes |
Usage
---
import Timeline from "@core/components/ui/Timeline.astro";
import TimelineItem from "@core/components/ui/TimelineItem.astro";
---
<Timeline>
<TimelineItem title="Project Started" date="January 2026">
<p>Initial planning and requirements gathering.</p>
</TimelineItem>
<TimelineItem title="Design Phase" date="February 2026">
<p>Wireframes and visual design completed.</p>
</TimelineItem>
<TimelineItem title="Launch" date="March 2026">
<p>Site launched successfully.</p>
</TimelineItem>
</Timeline>Accessibility
- Timeline renders as an
<ol>(ordered list) — provides semantic structure for chronological entries. - Each TimelineItem renders as an
<li>with a semantic<h3>for the title and<time>for the date. - The vertical line is a CSS border on the
<ol>. Dot markers are decorative. - Left-aligned layout is consistent across all viewport widths — no content reflow on resize.