event-schedule timeline agenda conference vertical timeline event-schedule vertical agenda chronological vertical event timeline schedule with visual connecting line
Event Schedule Timeline
Fetch pattern JSON:
curl https://webspire.de/patterns/event-schedule/timeline.json timeline.html
<section class="ws-event-schedule" aria-label="Event timeline">
<div class="mx-auto max-w-3xl px-4 py-12">
<h2 class="mb-2 text-2xl font-bold text-slate-900">Event Timeline</h2>
<p class="mb-10 text-sm text-slate-500">March 21, 2026</p>
<div role="list">
<!-- Event 1 -->
<div class="flex gap-4" role="listitem">
<div class="w-14 shrink-0 pt-4 text-right">
<time datetime="2026-03-21T09:00" class="text-sm font-semibold text-slate-900">09:00</time>
</div>
<div class="flex flex-col items-center">
<div class="h-4"></div>
<div class="h-3 w-3 shrink-0 rounded-full border-2 border-blue-500 bg-[var(--ws-event-schedule-bg)]"></div>
<div class="w-px flex-1 bg-slate-200"></div>
</div>
<div class="flex-1 pb-8 pt-1">
<div class="rounded-lg border border-slate-200 bg-[var(--ws-event-schedule-bg)] p-4 shadow-sm">
<h3 class="text-sm font-semibold text-slate-900">Opening Keynote: The Future of Web</h3>
<p class="mt-1 text-sm text-slate-500">Dr. Anna Meier</p>
<span class="mt-2 inline-flex items-center rounded-full bg-blue-50 px-2.5 py-0.5 text-xs font-medium text-blue-700">Main Hall</span>
</div>
</div>
</div>
<!-- Event 2 -->
<div class="flex gap-4" role="listitem">
<div class="w-14 shrink-0 pt-4 text-right">
<time datetime="2026-03-21T10:30" class="text-sm font-semibold text-slate-900">10:30</time>
</div>
<div class="flex flex-col items-center">
<div class="h-4"></div>
<div class="h-3 w-3 shrink-0 rounded-full border-2 border-emerald-500 bg-[var(--ws-event-schedule-bg)]"></div>
<div class="w-px flex-1 bg-slate-200"></div>
</div>
<div class="flex-1 pb-8 pt-1">
<div class="rounded-lg border border-slate-200 bg-[var(--ws-event-schedule-bg)] p-4 shadow-sm">
<h3 class="text-sm font-semibold text-slate-900">CSS Architecture at Scale</h3>
<p class="mt-1 text-sm text-slate-500">James Park</p>
<span class="mt-2 inline-flex items-center rounded-full bg-emerald-50 px-2.5 py-0.5 text-xs font-medium text-emerald-700">Room A</span>
</div>
</div>
</div>
<!-- Event 3 -->
<div class="flex gap-4" role="listitem">
<div class="w-14 shrink-0 pt-4 text-right">
<time datetime="2026-03-21T13:00" class="text-sm font-semibold text-slate-900">13:00</time>
</div>
<div class="flex flex-col items-center">
<div class="h-4"></div>
<div class="h-3 w-3 shrink-0 rounded-full border-2 border-blue-500 bg-[var(--ws-event-schedule-bg)]"></div>
<div class="w-px flex-1 bg-slate-200"></div>
</div>
<div class="flex-1 pb-8 pt-1">
<div class="rounded-lg border border-slate-200 bg-[var(--ws-event-schedule-bg)] p-4 shadow-sm">
<h3 class="text-sm font-semibold text-slate-900">Building Design Systems with Tailwind</h3>
<p class="mt-1 text-sm text-slate-500">Lisa Nguyen</p>
<span class="mt-2 inline-flex items-center rounded-full bg-blue-50 px-2.5 py-0.5 text-xs font-medium text-blue-700">Main Hall</span>
</div>
</div>
</div>
<!-- Event 4 (last) -->
<div class="flex gap-4" role="listitem">
<div class="w-14 shrink-0 pt-4 text-right">
<time datetime="2026-03-21T15:00" class="text-sm font-semibold text-slate-900">15:00</time>
</div>
<div class="flex flex-col items-center">
<div class="w-px flex-1 bg-slate-200"></div>
<div class="h-3 w-3 shrink-0 rounded-full border-2 border-purple-500 bg-[var(--ws-event-schedule-bg)]"></div>
<div class="h-4"></div>
</div>
<div class="flex-1 pt-1">
<div class="rounded-lg border border-slate-200 bg-[var(--ws-event-schedule-bg)] p-4 shadow-sm">
<h3 class="text-sm font-semibold text-slate-900">Performance Panel: Core Web Vitals</h3>
<p class="mt-1 text-sm text-slate-500">Panel Discussion</p>
<span class="mt-2 inline-flex items-center rounded-full bg-purple-50 px-2.5 py-0.5 text-xs font-medium text-purple-700">Room B</span>
</div>
</div>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
event-scheduletimelineagendaconferencevertical
Slots
| Name | Required | Description |
|---|---|---|
| time | Yes | Time label displayed to the left of the timeline. |
| title | Yes | Session or event title. |
| speaker | No | Speaker or presenter name. |
| location | No | Location or room tag. |
A vertical timeline layout with a connecting line, time labels on the left, and content cards on the right. Each entry has a colored dot marker, session title, speaker, and location tag.