GOOD

Headers

Site

<header id="header">
  <h2><a href="…">GOOD</a></h2>
  <p>Creative Solutions for Living Well + Doing Good.</p>
  …
</header>

Site (minimal)

<header id="header" class="minimal">
  <h2><a href="…">GOOD</a></h2>
  …
</header>

Site (signed in)

<header id="header" class="minimal has-account">
  <h2><a href="…">GOOD</a></h2>
  …
  <section class="account">…</section>
</header>

Section

Section Title

<header class="sub">
  <div class="container">
    <div>
      <h1>Section Title</h1>
    </div>
  </div>
</header>

Topic

Civic Hacking

<header class="topic-header">
  <div class="container">
    <div>
      <h1>Civic Hacking</h1>
    </div>
  </div>
</header>

Member

Ethan Lipsitz

Co-founder and CEO of Apliiq, design clothes as unique as you are.

I am good at giving a damn.

<header class="member-header">
  <div class="container">
    <div>
      <div class="basics">
        <h1>
          <img src="…" width="130" height="130" alt="" />
          Ethan Lipsitz
        </h1>
      </div>
      <div class="details">
        <p class="introduction">Co-founder and CEO of Apliiq, design clothes as unique as you are.</p>
        <p class="skills">I am good at giving a damn.</p>
      </div>
    </div>
  </div>
</header>

Do

Do

Go for an adventure

Do It

Sometimes you just need to drop everything and go for an adventure. Once you get into the daily routine of eat, sleep, work, work out, sleep, repeat, it can be difficult to remember how to get away. We are social beings, so meeting and interacting with new people is part of our nature. Sometimes a little spontaneity can go a long way.

Find someone to go skydiving with, do the marathon you've been talking about, or cook up a feast for your friends over an open fire in the middle of nowhere!

Participants

1,204

<section class="do-header">
  <div class="container">
    <div>
      <h2>Do</h2>

      <h1>Go for an adventure</h1>

      <form action="" method="post" class="do">
        <h6>Do It</h6>
        <p>…</p>
      </form>

      <div class="body">
        <div>
          <p>Sometimes you just need to drop everything and go for an adventure. Once you get into the daily routine…
        </div>
      </div>

      <section class="participants">
        <header>
          <h2>Participants</h2>
          <p><abbr title="1,204 people are in">1,204</abbr></p>
        </header>
        <ul>
          …
        </ul>
      </section>

      <ul class="share">
        <li class="facebook"><a href="" title="Share this on Facebook">Share</a></li>
        <li class="twitter"><a href="" title="Share this on Twitter">Tweet</a></li>
      </ul>
    </div>
  </div>
</section>

Link

129 people think this is good

<section class="post">
  <header>
    <h2 class="link">Link</h2>

    <section class="votes">
      <h2>129 people think this is good</h2>
      <ul>
        …
      </ul>
    </section>

    <form action="" method="post" class="vote">
      <p><button type="submit" title="Promote this">It’s GOOD</button></p>
    </form>
  </header>
</section>

Do (Classic)

Do

14 people are in

Do It

<section class="post">
  <header>
    <h2 class="do">Do</h2>

    <section class="dos">
      <h2>14 people are in</h2>
      <ul>
        …
      </ul>
    </section>

    <form action="" method="post" class="doing">
      <h6>Do It</h6>
      <p>…</p>
    </form>

  </header>
</section>

Search

<header class="search-header">
  <div class="container">
    <form action="" method="get">
      <h1>
        <label>
          <span>You searched for…</span>
          <input name="q" type="search" placeholder="What are you looking for?" value="dinosaur" />
        </label>
        <button type="submit">Search</button>
      </h1>
    </form>
  </div>
</header>

Onboarding

Skip this

Welcome Agus Echagüe, You’re In!

Nicely done! You just marked this to-do: Biking to Work. See below to find great members and topics to follow.

<header class="sub">
  <div class="container">
    <div>
      <p class="skip"><a href="">Skip this</a></p>

      <h1>Welcome Agus Echagüe, You’re In!</h1>
      <p>Nicely done! You just marked this to-do: <strong>Biking to Work</strong>. See below to find great members and topics to follow.</p>

      <nav class="pagination">…</nav>
    </div>
  </div>
</header>