Activity feed

Timeline column, per-event dots, actor initials, and relative timestamps.

12 min ago

Mira merged feat/css-layers into main.
1 hr ago

Jordan requested review on PR #218.
Yesterday

Deploy v2026.04.1 rolled out to edge PoPs.

Widely Supported

uino-js

Quick implementation

.af-item {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 0.65rem 0.75rem;
}
.af-dot {
  border: 2px solid var(--accent);
  border-radius: 50%;
}

Prompt this to your LLM

Timeline line via pseudo-element.

Build an activity feed.

Use .activity-feed-demo, .activity-feed-card, ul.af-list, li.af-item.
Each item: vertical line segment, dot, avatar initials, relative time, sentence with optional links.
role="list" on ul.

Return HTML + CSS.

Why this matters in 2026

Audit logs and social feeds share the same visual grammar; a reusable timeline keeps product surfaces aligned.

The logic

Grid aligns dots while copy flexes; tabular nums keep timestamps from jittering.

Accessibility & performance

Announce the list as a whole; individual events can use live regions when streaming updates in JS.