Pending Notice - Everyday Interface Patterns

A static confirmation pending notice shows mina@new.test, Not shown code, 15 minutes, and Pending confirmation status.

Program

Confirmation pending notices should show where confirmation is expected and what is not shown without generating or sending anything.

confirmation_pending_notice.html

Visuals: captured from real browser rendering

<section class="pending-notice" aria-labelledby="pending-notice-title"><h2 id="pending-notice-title">Confirmation pending notice</h2><dl>
  <div><dt>Sent to</dt><dd>mina@new.test</dd></div>
  <div><dt>Code</dt><dd>Not shown</dd></div><div><dt>Expires</dt><dd>15 minutes</dd></div>
  <div><dt>Status</dt><dd><span class="badge">Pending confirmation</span></dd></div></dl>
  <p class="check">Learner check: confirmation state is visible without sending or showing a code.</p>
  <p class="note">Static pending notice only; no email sending, code generation, mailbox access, auth service, account mutation, storage, route, API, network, script, form submit, analytics, timers, or live confirmation runs.</p></section>
<style>
  .pending-notice { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #1d4ed8; padding: 12px; background: #eff6ff; }
  .pending-notice dl { display: grid; gap: 8px; margin: 0; }
  .pending-notice dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .pending-notice dt { color: #475569; }
  .pending-notice dd, .check, .note { margin: 0; }
  .badge { border-radius: 999px; background: #dbeafe; padding: 2px 8px; }
  .note { color: #475569; }
</style>

Label the pending notice.
The section is labelled by its visible heading.
Show destination email.
The confirmation destination is exact pinned data.
Show code and expiry rows.
The code state and expiry are exact pinned data.
Render pending status.
The status badge says confirmation is pending.
Check pending readback.
The check says confirmation state is visible without sending or showing a code.
Check pending honesty.
Destination email, code state, expiry, status, and no live confirmation.

step flow step(1) labels the source, step(2) shows the destination email, step(3) shows code and expiry, step(4) shows pending status, step(5) checks the confirmation readback, and step(6) checks the honesty note.

pending readback The section heading names the confirmation pending notice surface.

pending rows Sent to, Code, Expires, and Status values are exact pinned data.

no live confirmation The lesson should not imply email sending, code generation, mailbox access, auth services, account mutations, storage, routes, APIs, networks, scripts, form submits, analytics, timers, or live confirmation.