Template Card Choice - Everyday Interface Patterns

A static template choice row shows Starter Board selected beside Launch Plan, with no marketplace, recommendation, or storage behavior.

Program

Template choice cards should make the selected option visible without pretending to install or recommend anything.

template_card_choice.html

Visuals: captured from real browser rendering

<section class="template-choice" aria-labelledby="template-choice-title">
  <h2 id="template-choice-title">Choose a template</h2>
  <div class="cards" aria-label="Template choices">
    <article class="card selected" aria-current="true">
      <h3>Starter Board</h3>
      <p>Selected template</p>
      <button type="button">Use Starter Board</button>
    </article>
    <article class="card">
      <h3>Launch Plan</h3>
      <p>Available option</p>
      <button type="button">Preview Launch Plan</button>
    </article>
  </div>
  <p class="note">Static template choice only; no marketplace, recommendation engine, storage, or backend catalog runs.</p>
</section>
<style>
  .template-choice { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #64748b; padding: 12px; }
  .cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card { display: grid; gap: 8px; border: 1px solid #94a3b8; padding: 10px; }
  .selected { border-color: #2563eb; background: #eff6ff; }
  .card p, .note { margin: 0; }
  .card button { justify-self: start; padding: 8px 12px; }
  .note { color: #475569; }
</style>

Label the template choice section.
The section is labelled by its visible heading.
Show the first pinned template card.
The first template name is fixed display data.
Show the second pinned template card.
The second template name is fixed display data.
Mark Starter Board as selected.
aria-current marks the selected static card.
Show the selected-card affordance.
The button is type button and does not install anything.
Check template choice honesty.
Pinned cards, selected state, button, and no catalog service.

choice heading The heading names the template choice surface.

selected card Starter Board is visibly selected with aria-current.

no catalog The lesson should not imply a marketplace, recommendation engine, storage, or backend catalog.