Draft Preview - Everyday Interface Patterns

A static draft comment preview shows Mina Lee, Looks good to me., Team visibility, and Not posted status.

Program

Draft comment previews should show exactly what will be visible before anything is submitted or posted.

comment_draft_preview.html

Visuals: captured from real browser rendering

<section class="draft-preview" aria-labelledby="draft-preview-title"><h2 id="draft-preview-title">Comment draft preview</h2><dl>
  <div><dt>Author</dt><dd>Mina Lee</dd></div>
  <div><dt>Draft</dt><dd>Looks good to me.</dd></div><div><dt>Visibility</dt><dd>Team</dd></div>
  <div><dt>Status</dt><dd><span class="badge">Not posted</span></dd></div></dl>
  <p class="check">Learner check: this is a readback before any comment is posted.</p>
  <p class="note">Static draft preview only; no live editor, comment API, submission service, storage, route, API, network, script, form submit, analytics, timers, or live posting runs.</p></section>
<style>
  .draft-preview { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #0f766e; padding: 12px; background: #f0fdfa; }
  .draft-preview dl { display: grid; gap: 8px; margin: 0; }
  .draft-preview dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .draft-preview dt { color: #475569; }
  .draft-preview dd, .check, .note { margin: 0; }
  .badge { border-radius: 999px; background: #ccfbf1; padding: 2px 8px; }
  .note { color: #475569; }
</style>

Label the draft preview.
The section is labelled by its visible heading.
Show the author row.
The author is exact pinned data.
Show draft and visibility.
The draft text and visibility are exact pinned data.
Render not-posted status.
The status badge says the comment is not posted.
Check draft readback.
The check says this is a readback before posting.
Check draft honesty.
Author, draft, visibility, status, and no live posting.

step flow step(1) labels the source, step(2) shows the author, step(3) shows draft and visibility, step(4) shows the not-posted status, step(5) checks the draft readback, and step(6) checks the honesty note.

draft readback The section heading names the comment draft preview surface.

draft rows Author, Draft, Visibility, and Status values are exact pinned data.

no live posting The lesson should not imply live editors, comment APIs, submission services, storage, routes, APIs, networks, scripts, form submits, analytics, timers, or live posting.