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

Family

activity-feed

Tier

enhanced

Kind

component

Extends

activity-feed/base

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.