Cancellation Notice Draft - Everyday Interface Patterns

A static cancellation notice draft shows Mina Lee recipient, Email channel, Not sent message, and Draft notice status.

Program

Cancellation notice drafts should show who would receive a notice and by which channel without sending anything.

cancellation_notice_draft.html

Visuals: captured from real browser rendering

<section class="notice-draft" aria-labelledby="notice-draft-title"><h2 id="notice-draft-title">Cancellation notice draft</h2><dl>
  <div><dt>Recipient</dt><dd>Mina Lee</dd></div>
  <div><dt>Channel</dt><dd>Email</dd></div><div><dt>Message</dt><dd>Not sent</dd></div>
  <div><dt>Status</dt><dd><span class="badge">Draft notice</span></dd></div></dl>
  <p class="check">Learner check: the notice draft is visible without sending a message.</p>
  <p class="note">Static cancellation notice draft only; no email sending, notification service, calendar update, booking service, message queue, storage, route, API, network, script, form submit, analytics, timers, or live notice runs.</p></section>
<style>
  .notice-draft { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #64748b; padding: 12px; }
  .notice-draft dl { display: grid; gap: 8px; margin: 0; }
  .notice-draft dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .notice-draft dt { color: #475569; }
  .notice-draft dd, .check, .note { margin: 0; }
  .badge { border-radius: 999px; background: #e2e8f0; padding: 2px 8px; }
  .note { color: #475569; }
</style>

Label the notice draft.
The section is labelled by its visible heading.
Show recipient row.
The recipient is exact pinned data.
Show channel and message rows.
The channel and message state are exact pinned data.
Render draft notice status.
The status badge says this is a draft notice.
Check notice readback.
The check says the notice draft is visible without sending a message.
Check notice honesty.
Recipient, channel, message, status, and no live notice.

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

notice readback The section heading names the cancellation notice draft surface.

notice rows Recipient, Channel, Message, and Status values are exact pinned data.

no live notice The lesson should not imply email sending, notification services, calendar updates, booking services, message queues, storage, routes, APIs, networks, scripts, form submits, analytics, timers, or live notices.