GOOD

Comment

Source

<ul class="comment-list">
  <li>
    <article>
      <h3 class="source">
        <a href="…">
          <img src="…" width="60" height="60" alt="" />
          Barbara Sarbin
        </a>
        <time datetime="2014-07-07T20:33:39-07:00">1 day ago</time>
      </h3>
    </article>
  </li>
</ul>

Comment with text

<ul class="comment-list">
  <li>
    <article>
      <h3 class="source">…</h3>
      <p>How cool is this?!  I never heard of GOOD before, I am so glad to know of this!  :)</p>
    </article>
  </li>
</ul>

Comment with options

<ul class="comment-list">
  <li>
    <article>
      <h3 class="source">…</h3>
      <p>…</p>
      <footer>
        <ul class="options">
          <li class="reply">
            <a href="…">Reply</a>
          </li>
          <li class="flag">
            <form action="…" method="post">
              <button type="submit" title="Flag this comment as inappropriate">Flag</button>
            </form>
          </li>
        </ul>
      </footer>
    </article>
  </li>
</ul>

Comment with images

  <ul class="comment-list">
    <li>
      <article>
        …
        <figure>
          <div class="image">
            <img src="…" alt="Street decorated with a bike" />
          </div>
        </figure>
        <figure>
          <div class="image">
            <img src="…" alt="Biking event" />
          </div>
        </figure>
        …
      </article>
    </li>
  </ul>

Comment with a video

<ul class="comment-list">
  <li>
    <article>
      …
      <iframe width="560" height="315" src="//www.youtube.com/embed/A8GZ_SH0mJk" frameborder="0" allowfullscreen></iframe>
      …
    </article>
  </li>
</ul>

Comment with replies

<ul class="comment-list">
  <li>
    <article>…</article>
    <ul class="comment-list">
      <li>
        <article>…</article>
        <ul class="comment-list">
          <li>
            <article>…</article>
            <ul class="comment-list">
              <li>
                <article>…</article>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    <article>…</article>
  </li>
  <li>
    <article>…</article>
  </li>
  <li>
    <article>…</article>
  </li>
</ul>