# Multi-Variant HTML Patterns

Every sketch produces 2-3 variants in the same HTML file. The user switches between them to compare.

## Tab-Based Variants

The standard approach: a tab bar at the top of the page, each tab shows a different variant.

```html
<div id="variant-nav" style="position:fixed;top:0;left:0;right:0;z-index:9998;background:var(--color-surface, #fff);border-bottom:1px solid var(--color-border, #e5e5e5);padding:8px 16px;display:flex;gap:8px;font-family:system-ui;">
  <button class="variant-tab active" onclick="showVariant('a')">A: Sidebar Layout</button>
  <button class="variant-tab" onclick="showVariant('b')">B: Top Nav</button>
  <button class="variant-tab" onclick="showVariant('c')">C: Floating Panels</button>
</div>

<div id="variant-a" class="variant active">
  <!-- Variant A content -->
</div>
<div id="variant-b" class="variant" style="display:none">
  <!-- Variant B content -->
</div>
<div id="variant-c" class="variant" style="display:none">
  <!-- Variant C content -->
</div>

<script>
function showVariant(id) {
  document.querySelectorAll('.variant').forEach(v => v.style.display = 'none');
  document.querySelectorAll('.variant-tab').forEach(t => t.classList.remove('active'));
  document.getElementById('variant-' + id).style.display = 'block';
  event.target.classList.add('active');
}
</script>
```

Add `padding-top` to the body to account for the fixed tab bar.

## Marking the Winner

After the user picks a direction, add a visual indicator to the winning tab:

```html
<button class="variant-tab active">A: Sidebar Layout ★ Selected</button>
```

Keep all variants visible and navigable — the winner is highlighted, not the only option.

## Side-by-Side (for small variants)

When comparing small elements (button styles, card layouts, icon treatments), render them next to each other with labels rather than using tabs:

```html
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:24px;">
  <div>
    <h3>A: Rounded</h3>
    <!-- variant content -->
  </div>
  <div>
    <h3>B: Sharp</h3>
    <!-- variant content -->
  </div>
  <div>
    <h3>C: Pill</h3>
    <!-- variant content -->
  </div>
</div>
```

## Variant Count

- **First round (dramatic):** 2-3 meaningfully different approaches
- **Refinement rounds:** 2-3 subtle variations within the chosen direction
- **Never more than 4** — more than that overwhelms. If there are 5+ options, narrow before showing.

## Synthesis Variants

When the user cherry-picks elements across variants, create a new variant tab labeled descriptively:

```html
<button class="variant-tab" onclick="showVariant('synth1')">Synthesis: A's layout + C's palette</button>
```