Activity Row - Everyday Interface Patterns

A static activity event row shows actor Jules, event changed status, target Beta copy review, and time 10:45 AM.

Program

Activity rows should identify who did what, to which item, and when without loading a realtime feed or audit service.

activity_event_row.html

Visuals: captured from real browser rendering

<section class="activity-row" aria-labelledby="activity-row-title">
  <h2 id="activity-row-title">Activity event</h2>
  <dl>
    <div><dt>Actor</dt><dd>Jules</dd></div>
    <div><dt>Event</dt><dd>changed status</dd></div>
    <div><dt>Target</dt><dd>Beta copy review</dd></div>
    <div><dt>Time</dt><dd><time datetime="10:45">10:45 AM</time></dd></div>
  </dl>
  <p class="note">Static activity row only; no route, save, share, filter, query, load, log, audit, realtime feed, or activity service runs.</p>
</section>
<style>
  .activity-row { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #64748b; padding: 12px; }
  .activity-row dl { display: grid; gap: 8px; margin: 0; }
  .activity-row dl div { display: grid; grid-template-columns: 7rem 1fr; gap: 8px; }
  .activity-row dt { color: #475569; }
  .activity-row dd, .note { margin: 0; }
  .note { color: #475569; }
</style>

Label the activity event row.
The section is labelled by its visible heading.
Show the actor row.
The actor is exact pinned data.
Show the event row.
The event is exact pinned data.
Show the target row.
The target is exact pinned data.
Show the time readback.
The time is exact pinned data.
Check activity row honesty.
Actor, event, target, time, and no activity service.

labelled event row The section heading names the activity event surface.

event readback Actor, event, target, and time are exact pinned data.

no activity service The lesson should not imply logging APIs, audit APIs, activity feeds, filters, queries, or realtime services.