Delivery Instruction Patterns

Instruction Summary

A static delivery instruction summary shows Order #1042, Leave at front desk instruction, Text on arrival contact, and Review only status.

Program

Delivery instruction summaries should show the order, instruction, and contact preference before any delivery service receives it.

delivery_instruction_summary.html
Visuals: captured from real browser rendering
<section class="delivery-summary" aria-labelledby="delivery-summary-title"><h2 id="delivery-summary-title">Delivery instruction summary</h2><dl>
  <div><dt>Order</dt><dd>Order #1042</dd></div>
  <div><dt>Instruction</dt><dd>Leave at front desk</dd></div><div><dt>Contact</dt><dd>Text on arrival</dd></div>
  <div><dt>Status</dt><dd><span class="badge">Review only</span></dd></div></dl>
  <p class="check">Learner check: the instruction is visible before any delivery action starts.</p>
  <p class="note">Static delivery instruction summary only; no delivery service, carrier service, courier dispatch, geolocation, map lookup, SMS send, notification, storage, route, API, network, script, event listener, form submit, analytics, timer, photo upload, camera, or live delivery runs.</p></section>
<style>
  .delivery-summary { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #0f766e; padding: 12px; background: #f0fdfa; }
  .delivery-summary dl { display: grid; gap: 8px; margin: 0; }
  .delivery-summary dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .delivery-summary dt { color: #475569; }
  .delivery-summary dd, .check, .note { margin: 0; }
  .badge { border-radius: 999px; background: #ccfbf1; padding: 2px 8px; }
  .note { color: #475569; }
</style>

  1. Label the delivery summary.

    The section is labelled by its visible heading.
    The section is labelled by its visible heading.

  2. Show order row.

    The order is exact pinned data.
    The order is exact pinned data.

  3. Show instruction and contact rows.

    The instruction and contact preference are exact pinned data.
    The instruction and contact preference are exact pinned data.

  4. Render review-only status.

    The status badge says this is review only.
    The status badge says this is review only.

  5. Check instruction readback.

    The check says the instruction is visible before any delivery action starts.
    The check says the instruction is visible before any delivery action starts.

  6. Check instruction honesty.

    Order, instruction, contact, status, and no live delivery.
    Order, instruction, contact, status, and no live delivery.
step flow step(1) labels the source, step(2) shows the order, step(3) shows instruction and contact rows, step(4) shows review-only status, step(5) checks the instruction readback, and step(6) checks the honesty note.
instruction readback The section heading names the delivery instruction summary surface.
instruction rows Order, Instruction, Contact, and Status values are exact pinned data.
no live delivery The lesson should not imply delivery services, carrier services, courier dispatch, geolocation, map lookups, SMS sends, notifications, storage, routes, APIs, networks, scripts, event listeners, form submits, analytics, timers, photo uploads, cameras, or live delivery.