Handoff Owner - Everyday Interface Patterns

A static handoff owner card shows Northstar Launch, Beta copy review, owner Mina, due date July 19, 2026, and Ready for review status.

Program

Handoff owner cards should show who owns the next step and when it is due without sending, saving, or routing anything.

handoff_owner_card.html

Visuals: captured from real browser rendering

<section class="handoff-owner" aria-labelledby="handoff-owner-title">
  <h2 id="handoff-owner-title">Handoff owner</h2>
  <dl>
    <div><dt>Project</dt><dd>Northstar Launch</dd></div>
    <div><dt>Handoff</dt><dd>Beta copy review</dd></div>
    <div><dt>Owner</dt><dd>Mina</dd></div>
    <div><dt>Due</dt><dd><time datetime="2026-07-19">July 19, 2026</time></dd></div>
    <div><dt>Status</dt><dd><span class="badge">Ready for review</span></dd></div>
  </dl>
  <button type="button">Review handoff</button>
  <p class="note">Static handoff owner card only; the button does not route, save, send, or call a project or collaboration service.</p>
</section>
<style>
  .handoff-owner { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #64748b; padding: 12px; }
  .handoff-owner dl { display: grid; gap: 8px; margin: 0; }
  .handoff-owner dl div { display: grid; grid-template-columns: 7rem 1fr; gap: 8px; }
  .handoff-owner dt { color: #475569; }
  .handoff-owner dd, .note { margin: 0; }
  .badge { border-radius: 999px; background: #dcfce7; padding: 2px 8px; }
  .handoff-owner button { justify-self: start; padding: 8px 12px; }
  .note { color: #475569; }
</style>

Label the handoff owner card.
The section is labelled by its visible heading.
Show the project context.
The project name is exact pinned data.
Show the handoff name.
The handoff name is exact pinned data.
Show the owner.
The owner value is exact pinned data.
Show due date and status.
The date and status are visible static readback.
Check owner-card honesty.
Project, handoff, owner, due, status, and no live service.

owner card The card names the handoff owner and project context.

due date readback The visible due date is paired with a datetime value.

no live service The lesson should not imply routing, saving, sending, project APIs, or collaboration services.