Mention Notice - Everyday Interface Patterns

A static mention readback notice shows @Priya, Budget review, Pending preview, and Mention not sent status.

Program

Mention readbacks should make the target and notification consequence visible before anything is delivered.

mention_readback_notice.html

Visuals: captured from real browser rendering

<section class="mention-notice" aria-labelledby="mention-notice-title"><h2 id="mention-notice-title">Mention readback notice</h2><dl>
  <div><dt>Mention</dt><dd>@Priya</dd></div>
  <div><dt>Thread</dt><dd>Budget review</dd></div><div><dt>Notification</dt><dd>Pending preview</dd></div>
  <div><dt>Status</dt><dd><span class="badge">Mention not sent</span></dd></div></dl>
  <p class="check">Learner check: the mention target is visible without sending a notification.</p>
  <p class="note">Static mention readback only; no mention lookup, user service, notification send, comment API, storage, route, API, network, script, form submit, analytics, timers, or live mention delivery runs.</p></section>
<style>
  .mention-notice { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #1d4ed8; padding: 12px; background: #eff6ff; }
  .mention-notice dl { display: grid; gap: 8px; margin: 0; }
  .mention-notice dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .mention-notice dt { color: #475569; }
  .mention-notice dd, .check, .note { margin: 0; }
  .badge { border-radius: 999px; background: #dbeafe; padding: 2px 8px; }
  .note { color: #475569; }
</style>

Label the mention notice.
The section is labelled by its visible heading.
Show mention target.
The mention target is exact pinned data.
Show thread and notification preview.
The thread and notification preview are exact pinned data.
Render not-sent status.
The status badge says the mention was not sent.
Check mention readback.
The check says the target is visible without notification delivery.
Check mention honesty.
Mention target, thread, notification preview, status, and no live delivery.

step flow step(1) labels the source, step(2) shows the mention target, step(3) shows thread and notification preview, step(4) shows the not-sent status, step(5) checks the mention readback, and step(6) checks the honesty note.

mention readback The section heading names the mention readback notice surface.

mention rows Mention, Thread, Notification, and Status values are exact pinned data.

no delivery The lesson should not imply mention lookups, user services, notification sends, comment APIs, storage, routes, APIs, networks, scripts, form submits, analytics, timers, or live mention delivery.