Recipient Card - Everyday Interface Patterns

A static recipient review card shows Nina Patel, Email, Launch notes, and Recipient reviewed status.

Program

Recipient review cards should show who will receive a message and through what channel before anything is sent.

recipient_review_card.html

Visuals: captured from real browser rendering

<section class="recipient-card" aria-labelledby="recipient-card-title"><h2 id="recipient-card-title">Recipient review card</h2><dl>
  <div><dt>To</dt><dd>Nina Patel</dd></div>
  <div><dt>Channel</dt><dd>Email</dd></div><div><dt>Subject</dt><dd>Launch notes</dd></div>
  <div><dt>Status</dt><dd><span class="badge">Recipient reviewed</span></dd></div></dl>
  <p class="check">Learner check: recipient and channel are visible before sending.</p>
  <p class="note">Static recipient review only; no contact lookup, email service, chat service, SMS service, send queue, storage, route, API, network, script, form submit, analytics, timers, or live sending runs.</p></section>
<style>
  .recipient-card { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #0f766e; padding: 12px; background: #f0fdfa; }
  .recipient-card dl { display: grid; gap: 8px; margin: 0; }
  .recipient-card dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .recipient-card dt { color: #475569; }
  .recipient-card dd, .check, .note { margin: 0; }
  .badge { border-radius: 999px; background: #ccfbf1; padding: 2px 8px; }
  .note { color: #475569; }
</style>

Label the recipient card.
The section is labelled by its visible heading.
Show recipient row.
The recipient is exact pinned data.
Show channel and subject.
The channel and subject are exact pinned data.
Render reviewed status.
The status badge says the recipient was reviewed.
Check recipient readback.
The check says recipient and channel are visible before sending.
Check recipient honesty.
Recipient, channel, subject, status, and no live sending.

step flow step(1) labels the source, step(2) shows the recipient, step(3) shows channel and subject, step(4) shows the reviewed status, step(5) checks the recipient readback, and step(6) checks the honesty note.

recipient readback The section heading names the recipient review card surface.

recipient rows To, Channel, Subject, and Status values are exact pinned data.

no live sending The lesson should not imply contact lookups, email services, chat services, SMS services, send queues, storage, routes, APIs, networks, scripts, form submits, analytics, timers, or live sending.