GOOD

Follow

Topic

Dinosaurs

<ul class="follow-list">
  <li>
    <h3>
      <a href="…">Dinosaurs</a>
    </h3>
    <form action="…" method="post" class="follow">…</form>
  </li>
</ul>

Topic with an image

Conscious Travel

<ul class="follow-list">
  <li>
    <h3 class="has-image">
      <a href="…">
        <img src="…" alt="" width="80" height="80" />
        Conscious Travel
      </a>
    </h3>
    <form action="…" method="post" class="follow">…</form>
  </li>
</ul>

Topic with meta data

Dinosaurs

200 Posts

10 Followers

<ul class="follow-list">
  <li>
    <h3>…</h3>
    <div class="meta">
      <p>200 Posts</p>
      <p>10 Followers</p>
    </div>
    <form action="…" method="post" class="follow">…</form>
  </li>
</ul>

Member

Katie Crepeau

32 Followers

<ul class="follow-list">
  <li>
    <h3 class="has-image">
      <a href="…">
        <img src="…" alt="" width="80" height="80" />
        Katie Crepeau
      </a>
    </h3>
    <div class="meta">
      <p>32 Followers</p>
    </div>
    <form action="" method="post" class="follow">…</form>
  </li>
</ul>

Introduction

Katie Crepeau

32 Followers

architect, blogger, health nut, happiness builder

<ul class="follow-list">
  <li>
    <h3 class="has-image">…</h3>
    …
    <p class="introduction">architect, blogger, health nut, happiness builder</p>
    …
  </li>
</ul>

Follow List

Dinosaurs

200 Posts

10 Followers
Jillian Anthony

35 Followers

Following
Yasha Wallin

35 Followers

<ul class="follow-list">
  <li>
    <h3>
      <a href="">Dinosaurs</a>
    </h3>
    …
  </li>
  <li>
    <h3 class="has-image">
      <a href="">
        <img src="…" alt="" width="80" height="80" />
        Jillian Anthony
      </a>
    </h3>
    …
  </li>
  <li>
    <h3 class="has-image">
      <a href="">
        <img src="…" alt="" width="80" height="80" />
        Chelsea Wagner
      </a>
    </h3>
    …
  </li>
</ul>

Follow List (multiple columns)

Sarah

adventurist. philanthropist. dreamer + believer. west coast dweller.
M. Landers

I read, I write, I watch things grow.
Matthew Richardson

I write thank you notes and encourage others to write thank you notes.
everydayhero

<section class="explore">
  <ul class="follow-list">
    …
  </ul>
  …
</section>

Follow List (two columns, to emphasize topics)

Johnny Miller

My life has a superb cast but I can't figure out the plot.
Karolle Rabarison

do good work, keep moving.
Idealist

We connect people with opportunities to do good around the world.
Glory Edim

I am good at turning obstacles into popsicles.
+ Invite

Invite the people you respect and make GOOD even better.

<section class="explore featured">
  <ul class="follow-list">
    …
    <li>
      <a href="…">
        <h3>
          <img alt="You" src="…" />
          + Invite
        </h3>
        <p>
          Invite the people you respect and make GOOD even better.
        </p>
      </a>
    </li>
  </ul>
  <ul class="follow-list">
    …
    <li>
      <a href="…">
        <h3>
          <img alt="Yourboard" src="…" />
          + Your City, Issue, Topic…
        </h3>
        <p>
          Post something with your tag to start a conversation.
        </p>
      </a>
    </li>
  </ul>
</section>