Thread Status - Everyday Interface Patterns

A static comment thread summary shows a pinned count, Open badge, latest comment time, View thread button, and no backend or polling.

Program

Comment summaries should show state and next action without pretending to fetch or submit comments. This lesson uses pinned thread data.

comment_thread_status.html

Visuals: captured from real browser rendering

<section class="thread-status" aria-labelledby="thread-title">
  <h2 id="thread-title">Comment thread</h2>
  <p><strong>Comments</strong> 4</p>
  <p><strong>Status</strong> <span class="badge">Open</span></p>
  <p><strong>Latest</strong> July 7, 2026 at 10:40</p>
  <button type="button">View thread</button>
  <p class="note">Static thread summary only; no comment backend or polling runs.</p>
</section>
<style>
  .thread-status { display: grid; gap: 10px; max-width: 34rem; border: 1px solid #64748b; padding: 12px; }
  .thread-status p, .note { margin: 0; }
  .thread-status button { justify-self: start; padding: 8px 12px; }
  .badge { border-radius: 999px; background: #fef3c7; padding: 2px 8px; }
  .note { color: #475569; }
</style>

Label the thread summary.
The section is labelled by its visible heading.
Show the pinned comment count.
The card gives an exact count for the thread.
Show the thread status badge.
The badge makes the thread state scannable.
Show the latest comment time.
The latest time is exact pinned lesson data.
Show the thread action.
The button gives a visible next step without opening a live thread.
Check the comment thread status.
The summary shows count, status, latest time, a button, and no polling.

comment count The card shows an exact pinned thread count.

status badge The Open badge makes the thread state visible.

no polling The lesson should not imply a comment backend or polling.