event schedule conference dark sticky tabs timeline tracks speaker agenda conference schedule agenda dark sticky tabs tracks speaker room multi-day timeline conference schedule with sticky day navigation multi-day event agenda dark theme color-coded conference track schedule
Event Schedule Sticky Dark
Fetch pattern JSON:
curl https://webspire.de/patterns/event-schedule/sticky-dark.json sticky-dark.html
<section class="ws-event-schedule bg-[var(--ws-event-schedule-bg)] py-20" aria-label="Conference schedule">
<div class="mx-auto max-w-7xl px-6">
<div class="mb-10 text-center">
<h2 class="text-3xl font-bold text-white sm:text-4xl">Conference Schedule</h2>
<p class="mt-3 text-sm text-slate-400">Three days of talks, workshops, and networking.</p>
</div>
<div class="grid gap-8 lg:grid-cols-[200px_1fr]">
<!-- Left: sticky day selector -->
<nav class="lg:sticky lg:top-8 lg:self-start" aria-label="Day navigation">
<ul class="flex gap-2 overflow-x-auto pb-1 lg:flex-col lg:gap-1 lg:overflow-x-visible lg:pb-0" role="tablist">
<li>
<a href="#day-1" role="tab" aria-selected="true" class="flex w-full items-center gap-2 rounded-xl bg-[var(--ws-color-accent)] px-4 py-3 text-sm font-semibold text-white transition">
<span class="shrink-0 text-xs font-bold opacity-70">01</span>
Day 1
</a>
</li>
<li>
<a href="#day-2" role="tab" aria-selected="false" class="flex w-full items-center gap-2 rounded-xl bg-transparent px-4 py-3 text-sm font-medium text-slate-400 transition hover:bg-slate-800 hover:text-white">
<span class="shrink-0 text-xs font-bold opacity-60">02</span>
Day 2
</a>
</li>
<li>
<a href="#day-3" role="tab" aria-selected="false" class="flex w-full items-center gap-2 rounded-xl bg-transparent px-4 py-3 text-sm font-medium text-slate-400 transition hover:bg-slate-800 hover:text-white">
<span class="shrink-0 text-xs font-bold opacity-60">03</span>
Day 3
</a>
</li>
</ul>
</nav>
<!-- Right: schedule days -->
<div class="space-y-12">
<!-- Day 1 -->
<div id="day-1">
<h3 class="mb-4 text-lg font-bold text-white">
Day 1 — <span class="text-slate-400 font-normal">May 12, 2026</span>
</h3>
<div class="divide-y divide-slate-800 rounded-2xl border border-slate-800 bg-slate-800/50 overflow-hidden">
<div class="flex items-start gap-4 px-6 py-5">
<span class="w-20 shrink-0 font-mono text-xs text-slate-500 pt-0.5">09:00</span>
<div class="flex h-2.5 w-2.5 shrink-0 mt-1.5 rounded-full bg-violet-500" aria-hidden="true"></div>
<div class="flex-1">
<p class="font-semibold text-white">Opening Keynote — The Future of AI</p>
<p class="mt-1 text-sm text-slate-400">Sarah Chen · Main Stage</p>
</div>
<span class="shrink-0 rounded-full bg-violet-500/10 px-2.5 py-0.5 text-xs font-medium text-violet-400">Keynote</span>
</div>
<div class="flex items-start gap-4 px-6 py-5">
<span class="w-20 shrink-0 font-mono text-xs text-slate-500 pt-0.5">10:30</span>
<div class="flex h-2.5 w-2.5 shrink-0 mt-1.5 rounded-full bg-emerald-500" aria-hidden="true"></div>
<div class="flex-1">
<p class="font-semibold text-white">Design Systems at Scale</p>
<p class="mt-1 text-sm text-slate-400">Marcus Webb · Track A</p>
</div>
<span class="shrink-0 rounded-full bg-emerald-500/10 px-2.5 py-0.5 text-xs font-medium text-emerald-400">Design</span>
</div>
<div class="flex items-start gap-4 px-6 py-5">
<span class="w-20 shrink-0 font-mono text-xs text-slate-500 pt-0.5">12:00</span>
<div class="flex h-2.5 w-2.5 shrink-0 mt-1.5 rounded-full bg-amber-500" aria-hidden="true"></div>
<div class="flex-1">
<p class="font-semibold text-white">Building Fast APIs with Edge Functions</p>
<p class="mt-1 text-sm text-slate-400">Priya Nair · Track B</p>
</div>
<span class="shrink-0 rounded-full bg-amber-500/10 px-2.5 py-0.5 text-xs font-medium text-amber-400">Engineering</span>
</div>
<div class="flex items-start gap-4 px-6 py-5">
<span class="w-20 shrink-0 font-mono text-xs text-slate-500 pt-0.5">14:00</span>
<div class="flex h-2.5 w-2.5 shrink-0 mt-1.5 rounded-full bg-violet-500" aria-hidden="true"></div>
<div class="flex-1">
<p class="font-semibold text-white">Closing Panel — What's Next</p>
<p class="mt-1 text-sm text-slate-400">All Speakers · Main Stage</p>
</div>
<span class="shrink-0 rounded-full bg-violet-500/10 px-2.5 py-0.5 text-xs font-medium text-violet-400">Panel</span>
</div>
</div>
</div>
<!-- Day 2 -->
<div id="day-2">
<h3 class="mb-4 text-lg font-bold text-white">
Day 2 — <span class="text-slate-400 font-normal">May 13, 2026</span>
</h3>
<div class="divide-y divide-slate-800 rounded-2xl border border-slate-800 bg-slate-800/50 overflow-hidden">
<div class="flex items-start gap-4 px-6 py-5">
<span class="w-20 shrink-0 font-mono text-xs text-slate-500 pt-0.5">09:30</span>
<div class="flex h-2.5 w-2.5 shrink-0 mt-1.5 rounded-full bg-emerald-500" aria-hidden="true"></div>
<div class="flex-1">
<p class="font-semibold text-white">Component Architecture Patterns</p>
<p class="mt-1 text-sm text-slate-400">Alex Rivera · Track A</p>
</div>
<span class="shrink-0 rounded-full bg-emerald-500/10 px-2.5 py-0.5 text-xs font-medium text-emerald-400">Design</span>
</div>
<div class="flex items-start gap-4 px-6 py-5">
<span class="w-20 shrink-0 font-mono text-xs text-slate-500 pt-0.5">11:00</span>
<div class="flex h-2.5 w-2.5 shrink-0 mt-1.5 rounded-full bg-amber-500" aria-hidden="true"></div>
<div class="flex-1">
<p class="font-semibold text-white">Zero-Downtime Deployments</p>
<p class="mt-1 text-sm text-slate-400">James Okafor · Track B</p>
</div>
<span class="shrink-0 rounded-full bg-amber-500/10 px-2.5 py-0.5 text-xs font-medium text-amber-400">Engineering</span>
</div>
<div class="flex items-start gap-4 px-6 py-5">
<span class="w-20 shrink-0 font-mono text-xs text-slate-500 pt-0.5">13:00</span>
<div class="flex h-2.5 w-2.5 shrink-0 mt-1.5 rounded-full bg-violet-500" aria-hidden="true"></div>
<div class="flex-1">
<p class="font-semibold text-white">AI-Powered Product Experiences</p>
<p class="mt-1 text-sm text-slate-400">Lena Kim · Main Stage</p>
</div>
<span class="shrink-0 rounded-full bg-violet-500/10 px-2.5 py-0.5 text-xs font-medium text-violet-400">Keynote</span>
</div>
<div class="flex items-start gap-4 px-6 py-5">
<span class="w-20 shrink-0 font-mono text-xs text-slate-500 pt-0.5">15:00</span>
<div class="flex h-2.5 w-2.5 shrink-0 mt-1.5 rounded-full bg-emerald-500" aria-hidden="true"></div>
<div class="flex-1">
<p class="font-semibold text-white">Accessibility Beyond Compliance</p>
<p class="mt-1 text-sm text-slate-400">Dana Moore · Track A</p>
</div>
<span class="shrink-0 rounded-full bg-emerald-500/10 px-2.5 py-0.5 text-xs font-medium text-emerald-400">Design</span>
</div>
</div>
</div>
<!-- Day 3 -->
<div id="day-3">
<h3 class="mb-4 text-lg font-bold text-white">
Day 3 — <span class="text-slate-400 font-normal">May 14, 2026</span>
</h3>
<div class="divide-y divide-slate-800 rounded-2xl border border-slate-800 bg-slate-800/50 overflow-hidden">
<div class="flex items-start gap-4 px-6 py-5">
<span class="w-20 shrink-0 font-mono text-xs text-slate-500 pt-0.5">09:00</span>
<div class="flex h-2.5 w-2.5 shrink-0 mt-1.5 rounded-full bg-amber-500" aria-hidden="true"></div>
<div class="flex-1">
<p class="font-semibold text-white">Observability at Scale</p>
<p class="mt-1 text-sm text-slate-400">Tom Singh · Track B</p>
</div>
<span class="shrink-0 rounded-full bg-amber-500/10 px-2.5 py-0.5 text-xs font-medium text-amber-400">Engineering</span>
</div>
<div class="flex items-start gap-4 px-6 py-5">
<span class="w-20 shrink-0 font-mono text-xs text-slate-500 pt-0.5">10:30</span>
<div class="flex h-2.5 w-2.5 shrink-0 mt-1.5 rounded-full bg-violet-500" aria-hidden="true"></div>
<div class="flex-1">
<p class="font-semibold text-white">The Art of Developer Experience</p>
<p class="mt-1 text-sm text-slate-400">Nadia Volkov · Main Stage</p>
</div>
<span class="shrink-0 rounded-full bg-violet-500/10 px-2.5 py-0.5 text-xs font-medium text-violet-400">Keynote</span>
</div>
<div class="flex items-start gap-4 px-6 py-5">
<span class="w-20 shrink-0 font-mono text-xs text-slate-500 pt-0.5">13:00</span>
<div class="flex h-2.5 w-2.5 shrink-0 mt-1.5 rounded-full bg-emerald-500" aria-hidden="true"></div>
<div class="flex-1">
<p class="font-semibold text-white">Workshop — Building with AI APIs</p>
<p class="mt-1 text-sm text-slate-400">Workshop Team · Lab</p>
</div>
<span class="shrink-0 rounded-full bg-emerald-500/10 px-2.5 py-0.5 text-xs font-medium text-emerald-400">Workshop</span>
</div>
<div class="flex items-start gap-4 px-6 py-5">
<span class="w-20 shrink-0 font-mono text-xs text-slate-500 pt-0.5">17:00</span>
<div class="flex h-2.5 w-2.5 shrink-0 mt-1.5 rounded-full bg-violet-500" aria-hidden="true"></div>
<div class="flex-1">
<p class="font-semibold text-white">Closing Ceremony & After Party</p>
<p class="mt-1 text-sm text-slate-400">All Attendees · Main Hall</p>
</div>
<span class="shrink-0 rounded-full bg-violet-500/10 px-2.5 py-0.5 text-xs font-medium text-violet-400">Event</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
eventscheduleconferencedarkstickytabstimelinetracksspeakeragenda
Slots
| Name | Required | Description |
|---|---|---|
| heading | Yes | Section title and subtitle. |
| day-nav | Yes | Sticky vertical day selector pills (Day 1, Day 2, Day 3). |
| schedule-days | Yes | Three stacked day sections, each with 4 schedule items. |
Props
| Name | Type | Default | Description |
|---|---|---|---|
| days | number | 3 | Number of conference days to show. |
Dark (slate-900) conference schedule with a 2-column layout. Left sticky column has day selector pills (Day 1–3) that link via anchor to the schedule sections. Right column shows three day sections, each with 4 schedule items displaying time slot (monospace), color-coded track dot (violet/emerald/amber), talk title, speaker name + room, and a track badge. Responsive — day nav becomes a horizontal scrollable row on mobile.