Recent Activity - Everyday Interface Patterns

A static recent activity list shows Maya created Northstar Launch and Jon added Timeline notes, with no feed, socket, timer, or backend service.

Program

Recent activity lists should show readable pinned events without pretending to poll or stream a live feed.

recent_activity_list.html

Visuals: captured from real browser rendering

<section class="activity-list" aria-labelledby="activity-title">
  <h2 id="activity-title">Recent activity</h2>
  <ol aria-label="Pinned recent activity">
    <li><strong>Maya</strong> created Northstar Launch</li>
    <li><strong>Jon</strong> added Timeline notes</li>
  </ol>
  <p class="status">2 pinned activities shown</p>
  <p class="note">Static activity list only; no activity feed, polling, socket, timer, or backend service runs.</p>
</section>
<style>
  .activity-list { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #64748b; padding: 12px; }
  .activity-list ol { display: grid; gap: 8px; margin: 0; padding-left: 1.5rem; }
  .status { border: 1px solid #60a5fa; background: #eff6ff; padding: 8px; }
  .activity-list p, .note { margin: 0; }
  .note { color: #475569; }
</style>

Label the activity section.
The section is labelled by its visible heading.
Use a labelled ordered list.
The list has a readable label.
Show the first pinned activity.
The first activity is exact lesson data.
Show the second pinned activity.
The second activity is exact lesson data.
Show the readback status.
The status text explains the static list count.
Check activity honesty.
Pinned activities, readback status, and no feed service.

activity heading The heading names the recent activity surface.

pinned events The two activity rows are fixed display data.

no feed service The lesson should not imply polling, sockets, timers, or backend feeds.