timeline activity changelog feed audit-log vertical timeline activity feed log changelog audit vertical activity log timeline changelog feed
Timeline Vertical Feed
Fetch pattern JSON:
curl https://webspire.de/patterns/timeline/vertical-feed.json vertical-feed.html
<section class="ws-timeline ws-timeline-feed mx-auto max-w-2xl px-6 py-12">
<h2 class="mb-8 text-2xl font-bold text-[var(--ws-color-text)]">Activity Log</h2>
<div class="relative">
<!-- Vertical connector -->
<div class="absolute left-[18px] top-2 h-[calc(100%-16px)] w-px bg-[var(--ws-color-border)]"></div>
<div class="space-y-6">
<!-- Entry -->
<div class="relative flex gap-4">
<div class="relative z-10 flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-blue-100">
<svg class="h-4 w-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
</div>
<div class="flex-1 rounded-xl border border-[var(--ws-color-border)] bg-[var(--ws-color-surface)] p-4 shadow-sm">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="h-6 w-6 rounded-full bg-slate-300"></div>
<span class="text-sm font-medium text-[var(--ws-color-text)]">Sarah Chen</span>
</div>
<time class="text-xs text-[var(--ws-color-text-muted)]">2 hours ago</time>
</div>
<p class="mt-2 text-sm text-[var(--ws-color-text-soft)]">Created new project <span class="font-medium text-[var(--ws-color-text)]">"Design System v2"</span></p>
</div>
</div>
<!-- Entry -->
<div class="relative flex gap-4">
<div class="relative z-10 flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-emerald-100">
<svg class="h-4 w-4 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
</div>
<div class="flex-1 rounded-xl border border-[var(--ws-color-border)] bg-[var(--ws-color-surface)] p-4 shadow-sm">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="h-6 w-6 rounded-full bg-slate-400"></div>
<span class="text-sm font-medium text-[var(--ws-color-text)]">Alex Rivera</span>
</div>
<time class="text-xs text-[var(--ws-color-text-muted)]">5 hours ago</time>
</div>
<p class="mt-2 text-sm text-[var(--ws-color-text-soft)]">Completed task <span class="font-medium text-[var(--ws-color-text)]">"API Documentation"</span></p>
<span class="mt-2 inline-block rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-medium text-emerald-700">Done</span>
</div>
</div>
<!-- Entry -->
<div class="relative flex gap-4">
<div class="relative z-10 flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-amber-100">
<svg class="h-4 w-4 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
</div>
<div class="flex-1 rounded-xl border border-[var(--ws-color-border)] bg-[var(--ws-color-surface)] p-4 shadow-sm">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="h-6 w-6 rounded-full bg-slate-500"></div>
<span class="text-sm font-medium text-[var(--ws-color-text)]">Jordan Park</span>
</div>
<time class="text-xs text-[var(--ws-color-text-muted)]">Yesterday</time>
</div>
<p class="mt-2 text-sm text-[var(--ws-color-text-soft)]">Commented on <span class="font-medium text-[var(--ws-color-text)]">"Sprint Planning"</span></p>
<blockquote class="mt-2 border-l-2 border-[var(--ws-color-border)] pl-3 text-xs italic text-[var(--ws-color-text-muted)]">"We should prioritize the auth flow before the dashboard widgets."</blockquote>
</div>
</div>
<!-- Date separator -->
<div class="relative flex items-center gap-4">
<div class="relative z-10 flex h-9 w-9 shrink-0 items-center justify-center rounded-full border-2 border-[var(--ws-color-border)] bg-[var(--ws-color-surface)] text-xs font-bold text-[var(--ws-color-text-muted)]">
18
</div>
<span class="text-xs font-medium uppercase tracking-wider text-[var(--ws-color-text-muted)]">March 18, 2026</span>
</div>
<!-- Entry -->
<div class="relative flex gap-4">
<div class="relative z-10 flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-purple-100">
<svg class="h-4 w-4 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/></svg>
</div>
<div class="flex-1 rounded-xl border border-[var(--ws-color-border)] bg-[var(--ws-color-surface)] p-4 shadow-sm">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="h-6 w-6 rounded-full bg-slate-300"></div>
<span class="text-sm font-medium text-[var(--ws-color-text)]">Sarah Chen</span>
</div>
<time class="text-xs text-[var(--ws-color-text-muted)]">Mar 18</time>
</div>
<p class="mt-2 text-sm text-[var(--ws-color-text-soft)]">Uploaded 3 files to <span class="font-medium text-[var(--ws-color-text)]">"Brand Assets"</span></p>
</div>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Experimental Draft
timelineactivitychangelogfeedaudit-logvertical
Slots
| Name | Required | Description |
|---|---|---|
| entries | Yes | Activity entries with icon, user, description, and timestamp. |
| dateSeparator | No | Date group dividers between entries. |