Option List

<div class="option-list">
  <ul>
    <li>
      <a href="…">
        Change Password
      </a>
    </li>
  </ul>
</div>

Links

<div class="option-list">
  <ul>
    <li>
      <a href="http://getctzn.com">
        Link
      </a>
    </li>
    <li>
      <a href="http://getctzn.com" class="disabled" onclick="event.preventDefault();">
        Disabled link
      </a>
    </li>
    <li>
      <a href="http://getctzn.com">
        <svg class="icon" width="24" height="24" viewBox="0 0 24 24">
          <switch><use xlink:href="#icon-link"></use><foreignObject>Link</foreignObject></switch>
        </svg>
        Link with an icon
      </a>
    </li>
  </ul>
</div>

Text

<div class="option-list">
  <ul>
    <li>
      <span class="text">letsneighbor</span>
    </li>
  </ul>
</div>

Buttons

<div class="option-list">
  <ul>
    <li>
      <form action="/do/action" method="post">
        <button>Do Action</button>
      </form>
    </li>
  </ul>
</div>

Delete Buttons

<div class="tags option-list">
  <ul>
    <li>
      <form action="" method="post">
        <button type="submit" title="Delete this hashtag">
          <span>#freelotsangeles</span>
          <svg class="icon" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icon-close"></use></svg>
        </button>
      </form>
    </li>
    <li>
      <form action="" method="post">
        <button type="submit" title="Delete this hashtag">
          <span>#myla</span>
          <svg class="icon" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icon-close"></use></svg>
        </button>
      </form>
    </li>
  </ul>
</div>

Checkboxes

• Option
• Another Option

<ul class="option-list">
  <li>
    <label>
      <input type="checkbox" />
      <span>Option</span>
      <svg class="icon" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icon-checkmark"></use></svg>
    </label>
  </li>
  <li>
    <label>
      <input type="checkbox" checked="checked" />
      <span>Another Option</span>
      <svg class="icon" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icon-checkmark"></use></svg>
    </label>
  </li>
</ul>

Radio Buttons

<div class="option-list">
  <ul>
    <li>
      <label>
        <input type="radio" name="variablename" value="a" />
        <span>Option A</span>
        <svg class="icon" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icon-checkmark"></use></svg>
      </label>
    </li>
    <li>
      <label>
        <input type="radio" name="variablename" value="b" checked="checked" />
        <span>Option B</span>
        <svg class="icon" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icon-checkmark"></use></svg>
      </label>
    </li>
  </ul>
</div>

Connect Buttons

<div class="connect option-list">
  <ul>
    <li class="twitter">
      <form action="/connect" method="post">
        <button type="submit">
          <svg class="icon" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icon-twitter"></use></svg>
          <span>Sync My Twitter</span>
        </button>
      </form>
    </li>
    <li class="twitter active">
      <form action="/disconnect" method="post">
        <button type="submit" title="Remove this account from CTZN">
          <svg class="icon" width="24" height="24" viewBox="0 0 24 24">
            <switch><use xlink:href="#icon-twitter"></use><foreignObject>Twitter</foreignObject></switch>
          </svg>
          <span>@brianatgood</span>
          <svg class="icon" width="24" height="24" viewBox="0 0 24 24">
            <switch><use xlink:href="#icon-checkmark"></use><foreignObject>is syncing</foreignObject></switch>
          </svg>
          <span class="note">Pulls in photos and status updates from your account.</span>
        </button>
      </form>
    </li>
  </ul>
</div>

Upgrade Connection

<div class="connect option-list">
  <ul>
    <li class="facebook active">
      <form action="/disconnect" method="post">
        <button type="submit" title="Remove this account from CTZN">
          <svg class="icon" width="24" height="24" viewBox="0 0 24 24">
            <switch><use xlink:href="#icon-facebook"></use><foreignObject>Facebook</foreignObject></switch>
          </svg>
          <span class="username">Brian Nilsen</span>
          <svg class="icon" width="24" height="24" viewBox="0 0 24 24">
            <switch><use xlink:href="#icon-checkmark"></use><foreignObject>is syncing</foreignObject></switch>
          </svg>
          <span class="note">Pulls in photos and status updates from your account.</span>
        </button>
      </form>
    </li>
  </ul>
  <form action="…" method="post" class="reconnect">
    <p>
      Reconnect Facebook to also post videos and content from Facebook Groups you&manage.
      <button type="submit">
        <svg class="icon" width="24" height="24" viewBox="0 0 24 24">
          <switch><use xlink:href="#icon-refresh"></use><foreignObject>Refresh</foreignObject></switch>
        </svg>
      </button>
    </p>
  </form>
</div>

Connection Failed

<div class="connect option-list">
  <ul>
    <li class="twitter active">
      <form action="/disconnect" method="post">
        <button type="submit" title="Remove this account from CTZN">
          <svg class="icon" width="24" height="24" viewBox="0 0 24 24">
            <switch><use xlink:href="#icon-twitter"></use><foreignObject>Twitter</foreignObject></switch>
          </svg>
          <span>@brianatgood</span>
        </button>
      </form>
      <form action="/reconnect" method="post">
        <button type="submit" class="settings" title="Please sign in to sync this account again">
          <svg class="icon" width="24" height="24" viewBox="0 0 24 24">
            <switch><use xlink:href="#icon-alert"></use><foreignObject>This account is not syncing</foreignObject></switch>
          </svg>
        </button>
      </form>
    </li>
  </ul>
</div>

Connection Readonly

<div class="connect option-list">
  <h3>You can also post form these groups</h3>
  <ul>
    <li class="facebook active">
      <button type="button" disabled="disabled">
        <svg class="icon" width="24" height="24" viewBox="0 0 24 24">
          <switch><use xlink:href="#icon-facebook"></use><foreignObject>Facebook</foreignObject></switch>
        </svg>
        <span class="username">CicLAvia</span>
      </button>
    </li>
  </ul>
</div>

Monochrome

<main class="pushes page">
  <div class="option-list">
    <h3>Options</h3>
    <ul>
      <li>
        <a href="/join">
          Join a push
        </a>
      </li>
      <li>
        <a href="/start">
          Start a new push
        </a>
      </li>
    </ul>
  </div>
</main>

Push Colors

<div class="switch">
  <ul>
    <li>
      <a href="…" class="push-card lime">
        <span class="name">Artizen Labs</span>
      </a>
    </li>
    <li>
      <a href="…" class="push-card green">
        <span class="name">Crafting Stories</span>
      </a>
    </li>
  </ul>
</div>

Logos

<main class="ready page">
  <div>
    …
    <ul>
      <li>
        <a href="…">
          <div>
            <img src="…" height="35" alt="" />
          </div>
          Get CTZN for Android
        </a>
      </li>
      …
    </ul>
  </div>
  …
</main>

Dialog

TRICKY: Add a class name of “active” to make the dialog transition in.

<div class="post-options active">
    <div>
      <ul>
        <li>
          <form action="…" method="post">
            <button type="submit">
              Option A
            </button>
          </form>
        </li>
        …
        <li class="warning">
          <form action="…" method="post">
            <button type="submit">
              Destructive Option
            </button>
          </form>
        </li>
      </ul>
      <ul>
        <li>
          <button type="button">
            Cancel
          </button>
        </li>
      </ul>
    </div>
  </div>
  

Examples