activity feed timeline log events dashboard activity feed timeline log events avatar timestamp activity feed timeline recent activity log
Activity Feed Base
Fetch pattern JSON:
curl https://webspire.de/patterns/activity-feed/base.json base.html
<div class="ws-activity-feed rounded-xl border border-[var(--ws-activity-feed-border)] bg-[var(--ws-activity-feed-bg)] p-6">
<h3 class="mb-6 text-sm font-semibold text-[var(--ws-activity-feed-text)]">Recent Activity</h3>
<div class="relative ml-4 space-y-6 border-l-2 border-[var(--ws-activity-feed-border)] pl-6">
<div class="relative">
<span class="absolute -left-[calc(1.5rem+5px)] top-1 h-2.5 w-2.5 rounded-full border-2 border-[var(--ws-activity-feed-bg)] bg-[var(--ws-activity-feed-accent)]" aria-hidden="true"></span>
<div class="flex items-start gap-3">
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-indigo-100 text-xs font-bold text-indigo-700" aria-hidden="true">SK</div>
<div class="min-w-0 flex-1">
<p class="text-sm text-[var(--ws-activity-feed-text)]"><span class="font-medium">Sarah Kim</span> pushed 3 commits to <span class="font-medium">main</span></p>
<p class="mt-0.5 text-xs text-[var(--ws-activity-feed-text-soft)]">2 minutes ago</p>
</div>
</div>
</div>
<div class="relative">
<span class="absolute -left-[calc(1.5rem+5px)] top-1 h-2.5 w-2.5 rounded-full border-2 border-[var(--ws-activity-feed-bg)] bg-emerald-500" aria-hidden="true"></span>
<div class="flex items-start gap-3">
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-emerald-100 text-xs font-bold text-emerald-700" aria-hidden="true">MR</div>
<div class="min-w-0 flex-1">
<p class="text-sm text-[var(--ws-activity-feed-text)]"><span class="font-medium">Marco Rossi</span> completed task <span class="font-medium">Update dashboard</span></p>
<p class="mt-0.5 text-xs text-[var(--ws-activity-feed-text-soft)]">15 minutes ago</p>
</div>
</div>
</div>
<div class="relative">
<span class="absolute -left-[calc(1.5rem+5px)] top-1 h-2.5 w-2.5 rounded-full border-2 border-[var(--ws-activity-feed-bg)] bg-amber-500" aria-hidden="true"></span>
<div class="flex items-start gap-3">
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-amber-100 text-xs font-bold text-amber-700" aria-hidden="true">AJ</div>
<div class="min-w-0 flex-1">
<p class="text-sm text-[var(--ws-activity-feed-text)]"><span class="font-medium">Aisha Johnson</span> commented on <span class="font-medium">PR #142</span></p>
<p class="mt-0.5 text-xs text-[var(--ws-activity-feed-text-soft)]">1 hour ago</p>
</div>
</div>
</div>
<div class="relative">
<span class="absolute -left-[calc(1.5rem+5px)] top-1 h-2.5 w-2.5 rounded-full border-2 border-[var(--ws-activity-feed-bg)] bg-rose-500" aria-hidden="true"></span>
<div class="flex items-start gap-3">
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-rose-100 text-xs font-bold text-rose-700" aria-hidden="true">DL</div>
<div class="min-w-0 flex-1">
<p class="text-sm text-[var(--ws-activity-feed-text)]"><span class="font-medium">David Lee</span> opened issue <span class="font-medium">Fix sidebar overflow</span></p>
<p class="mt-0.5 text-xs text-[var(--ws-activity-feed-text-soft)]">3 hours ago</p>
</div>
</div>
</div>
</div>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
activityfeedtimelinelogeventsdashboard
Slots
| Name | Required | Description |
|---|---|---|
| title | Yes | Feed heading text. |
| items | Yes | Timeline activity items with avatars and descriptions. |
Vertical timeline with a connecting line and colored dots. Each item shows an avatar circle, user name, action description, and relative timestamp. Four items by default.