CTZN

Grid (with links)

<ul class="mix-list">
  <li class="add">
    <a href="…">
      <svg class="icon" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icon-mix"></use></svg>
      <span>New Mix</span>
    </a>
  </li>
  <li>
    <a href="…">
      <img src="…" alt="Project Citizen, from day one to Beta" />
    </a>
  </li>
  <li>
    <a href="…">
      <img src="…" alt="Lights Mix" />
    </a>
  </li>
</ul>

Grid (with checkboxes)

Create Mix

Go Back

<section class="mix-editor page">
  <header>
    <h1>Create Mix</h1>
    …
  </header>

  <form action="" method="post">
    <ul class="image-list">
      <li>
        <label>
          <input type="checkbox" />
          <img src="…" alt="Image 1" />
          <span class="number"></span>
        </label>
      </li>
      
      <li>
        <label>
          <input type="checkbox" />
          <img src="…" alt="Image 2" />
          <span class="number"></span>
        </label>
      </li>
      
      <li>
        <label>
          <input type="checkbox" checked="checked" />
          <img src="…" alt="Image 3" />
          <span class="number"><span>1</span></span>
        </label>
      </li>
    </ul>
    <p class="submit">
      <button type="submit">Next</button>
    </p>
  </form>
</section>