Tracking Summary - Everyday Interface Patterns

A static tracking summary shows masked tracking number TRK-***-482, carrier label ParcelCo, a View details button, and no carrier lookup, map, or backend service.

Program

Tracking summaries should expose the carrier and masked tracking value without pretending to look up a shipment.

tracking_number_summary.html

Visuals: captured from real browser rendering

<section class="tracking-summary" aria-labelledby="tracking-title">
  <h2 id="tracking-title">Tracking summary</h2>
  <p><strong>Carrier</strong> ParcelCo</p>
  <p><strong>Tracking</strong> <span class="code">TRK-***-482</span></p>
  <button type="button">View details</button>
  <p class="note">Static tracking summary only; no carrier lookup, map, or backend service runs.</p>
</section>
<style>
  .tracking-summary { display: grid; gap: 10px; max-width: 36rem; border: 1px solid #64748b; padding: 12px; }
  .tracking-summary p, .note { margin: 0; }
  .tracking-summary button { justify-self: start; padding: 8px 12px; }
  .code { font-family: monospace; background: #e2e8f0; padding: 2px 6px; }
  .note { color: #475569; }
</style>

Label the tracking summary.
The section is labelled by its visible heading.
Show the tracking heading.
The heading tells users this is tracking display.
Show the pinned carrier label.
The carrier is exact deterministic lesson data.
Show the masked tracking number.
The tracking value is masked static display data.
Show the details affordance.
The button names a possible next action without running a lookup.
Check summary honesty.
Carrier label, masked tracking, button, and no lookup service.

carrier label The carrier label is fixed display text.

masked tracking The tracking number is masked and pinned.

no lookup The lesson should not imply carrier lookup, map, or backend service behavior.