Headers

Page Title

<section class="page">
  <header>
    <h1>Page Title</h1>
  </header>
  …
</section>

Page Title

Go Back

<section class="page">
  <header>
    <h1>Page Title</h1>

    <a href="…" class="back">
      <svg class="icon" width="24" height="24" viewBox="0 0 24 24">
        <switch><use xlink:href="#icon-back"></use><foreignObject>←</foreignObject></switch>
      </svg>
      <span>Go Back</span>
    </a>
  </header>
  …
</section>

Page Title

Go Back

<section class="page">
  <header>
    <h1>Page Title</h1>

    <a href="…" class="next">  
      <svg class="icon" viewBox="0 0 24 24" width="24" height="24">
        <switch><use xlink:href="#icon-edit"></use><foreignObject>Edit Profile</foreignObject></switch>
      </svg>
    </a>

    <a href="…" class="back">…</a>
  </header>
</section>

Settings

Done

Go Back

<section class="page">
  <header>
    <h1>Settings</h1>

    <p class="action">
      <a href="…">Done</a>
    </p>

    <a href="…" class="back">…</a>
  </header>
</section>

Case Sensitive Page Title

Go Back

<section class="page">
  <header>
    <h1 class="name">Push Name</h1>

    <a href="…" class="back">…</a>
  </header>
  …
</section>

Powered by

Go Back

<section class="page">
  <header class="powered-by">
    <h1>
      <a href="…">
        Powered by
        <svg class="icon" width="100" height="38" viewBox="0 0 100 38">
          <switch><use xlink:href="#icon-ctzn"></use><foreignObject>CTZN</foreignObject></switch>
        </svg>
      </a>
    </h1>

    <a href="…" class="back">…</a>
  </header>
</section>

Powered by

live channel

<section class="push-card page">
  <header class="powered-by">
    <h1>…</h1>

    <p class="action">
      <a href="">
        <span>live channel</span>
      </a>
    </p>
  </header>
</section>

<header class="primary">
  <h2>
    <a href="…">
      <svg class="icon" viewBox="0 0 100 37.818" width="100" height="38">
        <switch><use xlink:href="#icon-ctzn"></use><foreignObject>CTZN</foreignObject></switch>
      </svg>
    </a>
  </h2>
</header>

<header class="primary">
  <h2>
    <a href="…">
      <svg class="icon" viewBox="0 0 100 37.818" width="100" height="38">
        <switch>
        <use xlink:href="#icon-ctzn"></use>
        <foreignObject>Citizen</foreignObject>
        </switch>
      </svg>
    </a>
  </h2>

  <a href="…" class="notifications">
    <svg class="icon" viewBox="0 0 24 24" width="24" height="24">
      <switch>
      <use xlink:href="#icon-bell"></use>
      <foreignObject>Notifications</foreignObject>
      </switch>
    </svg>
  </a>

  <a href="…" class="profile">
    <span class="avatar">
      <span class="size30 has-icon" data-content="B">
        <svg class="icon"><use xlink:href="#icon-user-circle"></use></svg>
      </span>
    </span>
  </a>
</header>

<header class="primary">
  <h2>
    <a href="">
      <svg class="icon" viewBox="0 0 100 37.818" width="100" height="38"><switch><use xlink:href="#icon-ctzn"></use><foreignObject>CTZN</foreignObject></switch></svg>
    </a>
    <span class="network-indicator"><span class="sending icon"></span></span>
  </h2>

  <a href="" class="notifications">…</a>

  <a href="" class="profile">…</a>
</header>

Headers (with a white background)

Form

Cancel

<section class="edit page">
  <header>
    <h1>Form</h1>

    <a href="…" class="back">
      Cancel
    </a>
  </header>
</section>

Mix Editor

Go Back

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

    <a href="…" class="back">…</a>
  </header>
</section>

My Actions

Go Back

<section class="actions page">
  <header>
    <h1>My Actions</h1>

    <a href="…" class="back">…</a>
  </header>
</section>

#bikepedcountla2015

Go Back

<section class="action-details page">
  <header>
    <h1>#bikepedcountla2015</h1>

    <a href="…" class="next">…</a>
    <a href="…" class="back">…</a>
  </header>
</section>

Footers

<footer class="primary">
  <div>
    <h2 class="ctzn">
      <span>Powered by</span>
      <a href="http://getctzn.com">
        <svg class="icon" width="100" height="38" viewbox="0 0 100 38"><switch><use xlink:href="#icon-ctzn"></use><foreignobject>CTZN</foreignobject></switch></svg></a>
    </h2>
    <p class="good">
      <span>A new app from</span>
      <a href="https://good.is">
        <svg class="icon" width="56" height="28" viewbox="0 0 56 28"><switch><use xlink:href="#icon-good"></use><foreignobject>GOOD</foreignobject></switch></svg></a>
    </p>
  </div>
  <p class="legal">Copyright © 2015 GOOD Worldwide Inc</p>
</footer>

<footer class="primary">
  <div>
    <h2 class="ctzn">
      <span>Powered by</span>
      <a href="http://getctzn.com">
        <svg class="icon" width="100" height="38" viewbox="0 0 100 38"><switch><use xlink:href="#icon-ctzn"></use><foreignobject>CTZN</foreignobject></switch></svg></a>
    </h2>
    <p class="good">
      <span>A new app from</span>
      <a href="https://good.is">
        <svg class="icon" width="56" height="28" viewbox="0 0 56 28"><switch><use xlink:href="#icon-good"></use><foreignobject>GOOD</foreignobject></switch></svg></a>
    </p>
  </div>
  <div class="legal">
    <p>Copyright © 2015-2016 GOOD Worldwide Inc</p>
    <ul>
      <li><a href="http://getctzn.com/privacy">Privacy Policy</a></li>
      <li><a href="http://getctzn.com/terms">Terms of Service</a></li>
    </ul>
  </div>
</footer>

<main class="teal push-card"></main>

<footer class="primary">
  <div>
    <h2 class="ctzn">
      <span>Powered by</span>
      <a href="http://getctzn.com">
        <svg class="icon" width="100" height="38" viewbox="0 0 100 38"><switch><use xlink:href="#icon-ctzn"></use><foreignobject>CTZN</foreignobject></switch></svg></a>
    </h2>
    <p class="good">
      <span>A new app from</span>
      <a href="https://good.is">
        <svg class="icon" width="56" height="28" viewbox="0 0 56 28"><switch><use xlink:href="#icon-good"></use><foreignobject>GOOD</foreignobject></switch></svg></a>
    </p>
  </div>
  <div class="legal">
    <p>Copyright © 2015-2016 GOOD Worldwide Inc</p>
    <ul>
      <li><a href="http://getctzn.com/privacy">Privacy Policy</a></li>
      <li><a href="http://getctzn.com/terms">Terms of Service</a></li>
    </ul>
  </div>
</footer>

<footer class="primary">
  <h2 class="about">a <a href="https://good.is"><svg class="icon" width="56" height="28" viewBox="0 0 56 28"><switch><use xlink:href="#icon-good"></use><foreignObject>GOOD</foreignObject></switch></svg></a> app</h2>
  <div class="legal">
    <p>Copyright © 2015-2016 GOOD Worldwide Inc</p>
    <ul>
      <li><a href="http://getctzn.com/privacy">Privacy Policy</a></li>
      <li><a href="http://getctzn.com/terms">Terms of Service</a></li>
    </ul>
  </div>
</footer>