Activity feed

How to use it

Use for a read-only history of recent changes, such as a project or account activity panel. Do not use it for notifications that need action (use a list with actions) or for live updates without a polite live region and rate limit. After copying, render the datetime attributes from your server timestamps and keep the relative text in sync, and update the heading id with its aria-labelledby reference.

Accessibility

The feed is an ordered list (<ol>) under a heading that names it through aria-labelledby, so screen readers announce how many events there are and their order; newest is first. Each relative time is a <time> element with a machine-readable datetime attribute, and the initials avatars are aria-hidden because the actor's name is already in the text. Event text is #0f172a on #ffffff (17.85:1), times #475569 on #ffffff (7.58:1) and avatar initials #1e3a8a on #dbeafe (8.49:1).

Source (copy-ready)

Copy code

<section class="dcl-activity-feed" aria-labelledby="dcl-activity-feed-heading">
  <h2 class="dcl-activity-feed__heading" id="dcl-activity-feed-heading">Recent activity</h2>
  <ol class="dcl-activity-feed__list" role="list">
    <li class="dcl-activity-feed__item">
      <span class="dcl-activity-feed__avatar" aria-hidden="true">PS</span>
      <p class="dcl-activity-feed__text"><strong>Priya Shah</strong> commented on <em>Release checklist</em>
        <time class="dcl-activity-feed__time" datetime="2026-03-12T09:41">5 minutes ago</time></p>
    </li>
    <li class="dcl-activity-feed__item">
      <span class="dcl-activity-feed__avatar" aria-hidden="true">DK</span>
      <p class="dcl-activity-feed__text"><strong>Daniel Kim</strong> moved <em>Fix login redirect</em> to Done
        <time class="dcl-activity-feed__time" datetime="2026-03-12T08:02">2 hours ago</time></p>
    </li>
    <li class="dcl-activity-feed__item">
      <span class="dcl-activity-feed__avatar" aria-hidden="true">AR</span>
      <p class="dcl-activity-feed__text"><strong>Ana Ruiz</strong> invited two new members to the project
        <time class="dcl-activity-feed__time" datetime="2026-03-11T16:20">Yesterday</time></p>
    </li>
  </ol>
</section>
<style>
.dcl-activity-feed { max-width: 30rem; font: inherit; color: #0f172a; background-color: #ffffff; }
.dcl-activity-feed__heading { margin: 0 0 0.75rem; font-size: 1.15rem; color: #0f172a; background-color: #ffffff; }
.dcl-activity-feed__list { margin: 0; padding: 0; list-style: none; }
.dcl-activity-feed__item { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid #e2e8f0; }
.dcl-activity-feed__avatar { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.25rem; height: 2.25rem; border-radius: 50%; font-size: 0.8rem; font-weight: 700; color: #1e3a8a; background-color: #dbeafe; }
.dcl-activity-feed__text { margin: 0; min-width: 0; line-height: 1.45; overflow-wrap: anywhere; color: #0f172a; background-color: #ffffff; }
.dcl-activity-feed__time { display: block; font-size: 0.85rem; color: #475569; background-color: #ffffff; }
</style>