Draft Publish Review Patterns

Draft Status

A static draft status card shows Release notes, Mina Lee, Team only visibility, and Draft status.

Program

Draft status cards should make the content, author, visibility, and state clear without saving or looking up a live document.

draft_status_card.html
Visuals: captured from real browser rendering
<section class="draft-status" aria-labelledby="draft-status-title"><h2 id="draft-status-title">Draft status card</h2><dl>
  <div><dt>Draft</dt><dd>Release notes</dd></div>
  <div><dt>Author</dt><dd>Mina Lee</dd></div>
  <div><dt>Visibility</dt><dd>Team only</dd></div>
  <div><dt>Status</dt><dd><span class="badge">Draft</span></dd></div></dl>
  <p class="note">Static draft status only; no CMS service, document service, author lookup, storage, route, API, network, script, form submit, or live draft save runs.</p></section>
<style>
  .draft-status { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #64748b; padding: 12px; }
  .draft-status dl { display: grid; gap: 8px; margin: 0; }
  .draft-status dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .draft-status dt { color: #475569; }
  .draft-status dd, .note { margin: 0; }
  .badge { border-radius: 999px; background: #fef3c7; padding: 2px 8px; }
  .note { color: #475569; }
</style>

  1. Label the draft status card.

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

  2. Show the draft row.

    The draft title is exact pinned data.
    The draft title is exact pinned data.

  3. Show the author row.

    The author is exact pinned data.
    The author is exact pinned data.

  4. Show the visibility row.

    The visibility value is exact pinned data.
    The visibility value is exact pinned data.

  5. Render the draft status.

    The status badge says the content is still a draft.
    The status badge says the content is still a draft.

  6. Check draft honesty.

    Draft, author, visibility, status, and no live draft save.
    Draft, author, visibility, status, and no live draft save.
static markup The section heading names the draft status surface.
draft rows Draft, Author, Visibility, and Status values are exact pinned data.
no live draft save The lesson should not imply CMS services, document services, author lookup, storage, routes, APIs, networks, scripts, form submits, or live draft saves.