Filter Summary - Everyday Interface Patterns

A static activity filter summary shows filter Approvals, actor Mina, date July 8, 2026, and 5 events.

Program

Activity filter summaries should explain the current log view without running a filter query, loading feed data, or calling an audit service.

activity_filter_summary.html

Visuals: captured from real browser rendering

<section class="activity-filter" aria-labelledby="activity-filter-title">
  <h2 id="activity-filter-title">Activity filter</h2>
  <dl>
    <div><dt>Filter</dt><dd>Approvals</dd></div>
    <div><dt>Actor</dt><dd>Mina</dd></div>
    <div><dt>Date</dt><dd><time datetime="2026-07-08">July 8, 2026</time></dd></div>
    <div><dt>Results</dt><dd><span class="badge">5 events</span></dd></div>
  </dl>
  <p class="note">Static filter summary only; no route, save, share, filter, query, load, log, audit, realtime feed, or activity service runs.</p>
</section>
<style>
  .activity-filter { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #0f766e; padding: 12px; background: #f0fdfa; }
  .activity-filter dl { display: grid; gap: 8px; margin: 0; }
  .activity-filter dl div { display: grid; grid-template-columns: 7rem 1fr; gap: 8px; }
  .activity-filter dt { color: #475569; }
  .activity-filter dd, .note { margin: 0; }
  .badge { border-radius: 999px; background: #ccfbf1; padding: 2px 8px; }
  .note { color: #475569; }
</style>

Label the activity filter summary.
The section is labelled by its visible heading.
Show the filter row.
The filter is exact pinned data.
Show the actor row.
The actor is exact pinned data.
Show the date row.
The date is exact pinned data.
Show the result count.
The result count is exact pinned data.
Check filter summary honesty.
Filter, actor, date, results, and no query service.

filter summary The section heading names the activity filter surface.

filter readback Filter, actor, date, and results are exact pinned data.

no query service The lesson should not imply filter/query APIs, logging APIs, audit APIs, activity feeds, or realtime services.