activity feed compact list log dashboard activity feed compact list log condensed minimal compact activity list condensed activity feed
Activity Feed Compact
Fetch pattern JSON:
curl https://webspire.de/patterns/activity-feed/compact.json compact.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-4 text-sm font-semibold text-[var(--ws-activity-feed-text)]">Activity</h3>
<ul class="divide-y divide-[var(--ws-activity-feed-border)]" role="list">
<li class="flex items-center gap-3 py-3">
<div class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-indigo-100 text-xs font-bold text-indigo-700" aria-hidden="true">SK</div>
<p class="min-w-0 flex-1 truncate text-sm text-[var(--ws-activity-feed-text)]"><span class="font-medium">Sarah Kim</span> pushed to main</p>
<time class="shrink-0 text-xs text-[var(--ws-activity-feed-text-soft)]">2m</time>
</li>
<li class="flex items-center gap-3 py-3">
<div class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-emerald-100 text-xs font-bold text-emerald-700" aria-hidden="true">MR</div>
<p class="min-w-0 flex-1 truncate text-sm text-[var(--ws-activity-feed-text)]"><span class="font-medium">Marco Rossi</span> completed a task</p>
<time class="shrink-0 text-xs text-[var(--ws-activity-feed-text-soft)]">15m</time>
</li>
<li class="flex items-center gap-3 py-3">
<div class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-amber-100 text-xs font-bold text-amber-700" aria-hidden="true">AJ</div>
<p class="min-w-0 flex-1 truncate text-sm text-[var(--ws-activity-feed-text)]"><span class="font-medium">Aisha Johnson</span> commented on PR #142</p>
<time class="shrink-0 text-xs text-[var(--ws-activity-feed-text-soft)]">1h</time>
</li>
<li class="flex items-center gap-3 py-3">
<div class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-rose-100 text-xs font-bold text-rose-700" aria-hidden="true">DL</div>
<p class="min-w-0 flex-1 truncate text-sm text-[var(--ws-activity-feed-text)]"><span class="font-medium">David Lee</span> opened an issue</p>
<time class="shrink-0 text-xs text-[var(--ws-activity-feed-text-soft)]">3h</time>
</li>
<li class="flex items-center gap-3 py-3">
<div class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-violet-100 text-xs font-bold text-violet-700" aria-hidden="true">LW</div>
<p class="min-w-0 flex-1 truncate text-sm text-[var(--ws-activity-feed-text)]"><span class="font-medium">Lisa Wang</span> merged PR #139</p>
<time class="shrink-0 text-xs text-[var(--ws-activity-feed-text-soft)]">5h</time>
</li>
</ul>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
activityfeedcompactlistlogdashboard
Slots
| Name | Required | Description |
|---|---|---|
| title | Yes | Feed heading text. |
| items | Yes | List of compact activity rows. |
Condensed activity list without timeline decorations. Each row shows avatar, name with inline action text, and timestamp aligned right. Five items for higher density.