Folder and Label Patterns

Folder Summary

A static folder assignment summary shows Design brief, Client work folder, Move action, and Review before moving status.

Program

Folder assignment summaries should show the destination before any item move or folder service runs.

folder_assignment_summary.html
Visuals: captured from real browser rendering
<section class="folder-summary" aria-labelledby="folder-summary-title"><h2 id="folder-summary-title">Folder assignment summary</h2><dl>
  <div><dt>Item</dt><dd>Design brief</dd></div>
  <div><dt>Folder</dt><dd>Client work</dd></div><div><dt>Action</dt><dd>Move</dd></div>
  <div><dt>Status</dt><dd><span class="badge">Review before moving</span></dd></div></dl>
  <p class="check">Learner check: the folder destination is visible before any item move.</p>
  <p class="note">Static folder assignment summary only; no folder service, label service, tagging service, pin service, sync service, storage, cookie, route, API, network, script, event listener, form submit, input, checkbox, analytics, timer, object URL, download, service worker, account/session behavior, or live item move runs.</p></section>
<style>
  .folder-summary { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #0f766e; padding: 12px; background: #f0fdfa; }
  .folder-summary dl { display: grid; gap: 8px; margin: 0; }
  .folder-summary dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .folder-summary dt { color: #475569; }
  .folder-summary dd, .check, .note { margin: 0; }
  .badge { border-radius: 999px; background: #ccfbf1; padding: 2px 8px; }
  .note { color: #475569; }
</style>

  1. Label the folder summary.

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

  2. Show item row.

    The item is exact pinned data.
    The item is exact pinned data.

  3. Show folder and action rows.

    The folder and action are exact pinned data.
    The folder and action are exact pinned data.

  4. Render review-before-moving status.

    The status badge says to review before moving.
    The status badge says to review before moving.

  5. Check folder readback.

    The check says the folder destination is visible before any item move.
    The check says the folder destination is visible before any item move.

  6. Check folder honesty.

    Item, folder, action, status, and no live item move.
    Item, folder, action, status, and no live item move.
step flow step(1) labels the source, step(2) shows the item, step(3) shows folder and action rows, step(4) shows review-before-moving status, step(5) checks the folder readback, and step(6) checks the honesty note.
folder readback The section heading names the folder assignment summary surface.
folder rows Item, Folder, Action, and Status values are exact pinned data.
no live item move The lesson should not imply folder services, label services, tagging services, pin services, sync services, storage, cookies, routes, APIs, networks, scripts, event listeners, form submits, inputs, checkboxes, analytics, timers, object URLs, downloads, service workers, account/session behavior, or live item moves.