event-schedule agenda conference timetable program event-schedule agenda timetable conference program sessions conference or event agenda layout schedule with time slots and speakers
Event Schedule Base
Fetch pattern JSON:
curl https://webspire.de/patterns/event-schedule/base.json base.html
<section class="ws-event-schedule" aria-label="Event schedule">
<div class="mx-auto max-w-4xl px-4 py-12">
<h2 class="mb-2 text-2xl font-bold text-[var(--ws-event-schedule-text)]">Event Schedule</h2>
<p class="mb-8 text-sm text-[var(--ws-event-schedule-text-soft)]">March 21, 2026</p>
<div class="overflow-hidden rounded-lg border border-[var(--ws-event-schedule-border)]">
<div class="grid grid-cols-[5rem_1fr_1fr_auto] items-center gap-4 bg-[var(--ws-event-schedule-header-bg)] px-4 py-3 text-xs font-semibold uppercase tracking-wide text-[var(--ws-event-schedule-text-soft)]" role="row" aria-hidden="true">
<span>Time</span>
<span>Session</span>
<span>Speaker</span>
<span>Location</span>
</div>
<div role="list">
<div class="grid grid-cols-[5rem_1fr_1fr_auto] items-center gap-4 border-t border-[var(--ws-event-schedule-border)] bg-[var(--ws-event-schedule-bg)] px-4 py-4" role="listitem">
<time datetime="2026-03-21T09:00" class="text-sm font-semibold text-[var(--ws-event-schedule-text)]">09:00</time>
<span class="text-sm font-medium text-[var(--ws-event-schedule-text)]">Opening Keynote: The Future of Web</span>
<span class="text-sm text-[var(--ws-event-schedule-text-soft)]">Dr. Anna Meier</span>
<span class="inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800">Main Hall</span>
</div>
<div class="grid grid-cols-[5rem_1fr_1fr_auto] items-center gap-4 border-t border-[var(--ws-event-schedule-border)] bg-[var(--ws-event-schedule-header-bg)] px-4 py-4" role="listitem">
<time datetime="2026-03-21T10:30" class="text-sm font-semibold text-[var(--ws-event-schedule-text)]">10:30</time>
<span class="text-sm font-medium text-[var(--ws-event-schedule-text)]">CSS Architecture at Scale</span>
<span class="text-sm text-[var(--ws-event-schedule-text-soft)]">James Park</span>
<span class="inline-flex items-center rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-medium text-emerald-800">Room A</span>
</div>
<div class="grid grid-cols-[5rem_1fr_1fr_auto] items-center gap-4 border-t border-[var(--ws-event-schedule-border)] bg-[var(--ws-event-schedule-bg)] px-4 py-4" role="listitem">
<time datetime="2026-03-21T13:00" class="text-sm font-semibold text-[var(--ws-event-schedule-text)]">13:00</time>
<span class="text-sm font-medium text-[var(--ws-event-schedule-text)]">Building Design Systems with Tailwind</span>
<span class="text-sm text-[var(--ws-event-schedule-text-soft)]">Lisa Nguyen</span>
<span class="inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800">Main Hall</span>
</div>
<div class="grid grid-cols-[5rem_1fr_1fr_auto] items-center gap-4 border-t border-[var(--ws-event-schedule-border)] bg-[var(--ws-event-schedule-header-bg)] px-4 py-4" role="listitem">
<time datetime="2026-03-21T15:00" class="text-sm font-semibold text-[var(--ws-event-schedule-text)]">15:00</time>
<span class="text-sm font-medium text-[var(--ws-event-schedule-text)]">Performance Panel: Core Web Vitals</span>
<span class="text-sm text-[var(--ws-event-schedule-text-soft)]">Panel Discussion</span>
<span class="inline-flex items-center rounded-full bg-purple-100 px-2.5 py-0.5 text-xs font-medium text-purple-800">Room B</span>
</div>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
event-scheduleagendaconferencetimetableprogram
Slots
| Name | Required | Description |
|---|---|---|
| dayHeader | Yes | Date heading for the schedule day. |
| time | Yes | Time slot for each session. |
| title | Yes | Session or talk title. |
| speaker | No | Speaker or presenter name. |
| location | No | Room or location tag. |
A structured event schedule with a day header and tabular rows for each time slot. Each row displays time, session title, speaker, and a color-coded location tag with alternating row backgrounds for readability.