Current Thumbnail - Everyday Interface Patterns

A static thumbnail gallery preview shows Canvas Tote, thumbnails Front Side Detail, current Front, and Gallery preview status.

Program

A thumbnail gallery should show the current view clearly before any live product gallery runs.

current_thumbnail_gallery.html

Visuals: captured from real browser rendering

<section class="thumb-gallery" aria-labelledby="thumb-gallery-title"><h2 id="thumb-gallery-title">Current thumbnail gallery</h2><div class="gallery-card" aria-label="Static product thumbnail gallery"><strong>Canvas Tote</strong><span class="current">Front</span><span>Side</span><span>Detail</span></div><dl>
  <div><dt>Product</dt><dd>Canvas Tote</dd></div>
  <div><dt>Thumbnails</dt><dd>Front, Side, Detail</dd></div><div><dt>Current view</dt><dd>Front</dd></div>
  <div><dt>Status</dt><dd><span class="badge">Gallery preview</span></dd></div></dl>
  <p class="check">Learner check: the current thumbnail is visible as a static readback, not a live product gallery.</p>
  <p class="note">Static product thumbnail gallery only; no framework, product API, cart mutation, image fetch, gallery engine, click handler, keyboard handler, route change, storage, cookie, API, network, script, event listener, form submit, input, textarea, contenteditable, timer, analytics, object URL, download, service worker, account/session behavior, live product gallery, live variant change, live cart update, or live submission runs.</p></section>
<style>
  .thumb-gallery { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #0f766e; padding: 12px; background: #f0fdfa; }
  .gallery-card { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; max-width: 32rem; border: 1px solid #0f766e; background: #ffffff; padding: 10px; }
  .gallery-card strong, .gallery-card span { border-radius: 6px; background: #ccfbf1; padding: 8px; text-align: center; }
  .gallery-card .current { outline: 2px solid #0f766e; font-weight: 700; }
  .thumb-gallery dl { display: grid; gap: 8px; margin: 0; }
  .thumb-gallery dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .thumb-gallery dt { color: #475569; }
  .thumb-gallery dd, .check, .note { margin: 0; }
  .badge { border-radius: 999px; background: #ccfbf1; padding: 2px 8px; }
  .note { color: #475569; }
</style>

Label the thumbnail gallery source.
The section is labelled by its visible heading.
Show thumbnail choices.
The static gallery card shows visible thumbnail choices.
Show the pinned product row.
The product row gives the readback context without a product API.
Show the pinned current view state.
The current view row shows the selected thumbnail as static state.
Render gallery-preview status.
The status badge is the rendered consequence of the pinned gallery state.
Check thumbnail gallery readback.
Static markup, visual affordance, readback, state update, rendered status, and no live gallery.

step flow step(1) labels the static source, step(2) shows the visual thumbnail affordance, step(3) shows the user readback, step(4) shows the pinned state update, step(5) shows the rendered consequence, and step(6) checks learner readback with honesty.

thumbnail readback The section heading names the current thumbnail gallery surface.

gallery rows Product, Thumbnails, Current view, and Status values are exact pinned data.

no live product gallery The lesson should not imply frameworks, product APIs, cart mutations, image fetches, gallery engines, click handlers, keyboard handlers, route changes, storage, cookies, APIs, networks, scripts, event listeners, form submits, inputs, textareas, contenteditable surfaces, timers, analytics, object URLs, downloads, service workers, account/session behavior, live product galleries, live variant changes, live cart updates, or live submissions.