Ticket Status - Everyday Interface Patterns

A static ticket summary card shows a pinned ticket id, subject, Received badge, updated time, and no submission or polling.

Program

Ticket status should be scannable without pretending to contact a ticketing system. This lesson uses one pinned ticket state.

ticket_status_summary.html

Visuals: captured from real browser rendering

<section class="ticket-summary" aria-labelledby="ticket-title">
  <h2 id="ticket-title">Support ticket</h2>
  <p><strong>Ticket</strong> SUP-2048</p>
  <p><strong>Subject</strong> Replay steps not loading</p>
  <p><strong>Status</strong> <span class="badge">Received</span></p>
  <p><strong>Updated</strong> July 7, 2026 at 09:30</p>
  <p class="note">Static ticket summary only; no ticket submission or server polling runs.</p>
</section>
<style>
  .ticket-summary { display: grid; gap: 10px; max-width: 36rem; border: 1px solid #64748b; padding: 12px; }
  .ticket-summary p, .note { margin: 0; }
  .badge { border-radius: 999px; background: #dbeafe; padding: 2px 8px; }
  .note { color: #475569; }
</style>

Label the ticket summary.
The section is labelled by its visible heading.
Show the pinned ticket id.
The id gives the ticket a stable visible reference.
Show the ticket subject.
The subject explains what the ticket is about.
Show the received status badge.
The badge makes the current ticket status visible.
Show the pinned update time.
The update time is exact static lesson data.
Check the ticket status summary.
The card shows a ticket id, subject, status badge, updated time, and no submission or polling.

ticket id The card shows an exact pinned support ticket id.

status badge The Received badge makes the current state visible.

no polling The lesson should not imply a real ticket submission or server polling.