Appointment Cancel Summary - Everyday Interface Patterns

A static appointment cancellation summary shows Design review, July 16 at 10:30 AM, Cancel appointment action, and Review only status.

Program

Appointment cancellation summaries should show the appointment, time, and action before any calendar or booking change.

appointment_cancel_summary.html

Visuals: captured from real browser rendering

<section class="appointment-cancel" aria-labelledby="appointment-cancel-title"><h2 id="appointment-cancel-title">Appointment cancel summary</h2><dl>
  <div><dt>Appointment</dt><dd>Design review</dd></div>
  <div><dt>Time</dt><dd>July 16, 10:30 AM</dd></div><div><dt>Action</dt><dd>Cancel appointment</dd></div>
  <div><dt>Status</dt><dd><span class="badge">Review only</span></dd></div></dl>
  <p class="check">Learner check: the cancel action is visible before any appointment changes.</p>
  <p class="note">Static appointment cancel summary only; no calendar mutation, booking service, appointment deletion, availability lookup, notification send, storage, route, API, network, script, form submit, analytics, timers, or live cancellation runs.</p></section>
<style>
  .appointment-cancel { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #1d4ed8; padding: 12px; background: #eff6ff; }
  .appointment-cancel dl { display: grid; gap: 8px; margin: 0; }
  .appointment-cancel dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .appointment-cancel dt { color: #475569; }
  .appointment-cancel dd, .check, .note { margin: 0; }
  .badge { border-radius: 999px; background: #dbeafe; padding: 2px 8px; }
  .note { color: #475569; }
</style>

Label the cancel summary.
The section is labelled by its visible heading.
Show appointment row.
The appointment name is exact pinned data.
Show time and action rows.
The time and action are exact pinned data.
Render review-only status.
The status badge says this is review only.
Check cancel readback.
The check says the cancel action is visible before appointment changes.
Check cancel honesty.
Appointment, time, action, status, and no live cancellation.

step flow step(1) labels the source, step(2) shows the appointment, step(3) shows time and action, step(4) shows review-only status, step(5) checks the cancel readback, and step(6) checks the honesty note.

cancel readback The section heading names the appointment cancel summary surface.

appointment rows Appointment, Time, Action, and Status values are exact pinned data.

no live cancellation The lesson should not imply calendar mutations, booking services, appointment deletions, availability lookups, notification sends, storage, routes, APIs, networks, scripts, form submits, analytics, timers, or live cancellations.