Comments

Default View (Open Comments)

Comments
Open Resolved
Today
A gorgeous day.
Melissa: I love nice days.
Jump to Comment
June 15, 2020
Rachel: Me three.
Jump to Thread (2)
Steel SMACKS him.
Melissa: I truly hate Brick and Steel.
Jump to Thread (2) 
<div class="c-feed is-open">
  <!-- menu item -->
  <button class="c-toolbar__button o-button o-button--discreet">
    <span class="o-button__icon o-icon o-icon--darkest">
      <i class="fa fa-comment-o"></i>
    </span>
    <span class="o-button__label o-button__label--full">5 Comments</span>
  </button>
  <!-- dropdown -->
  <div class="c-feed__modal">
    <div class="c-feed__header">
      <!-- dropdown title -->
      <strong>Comments</strong>
      <!-- dropdown to switch views (open, resolved) -->
      <div class="c-dropdown c-dropdown--right c-dropdown--dotted is-open">
        <button class="c-dropdown__button o-button o-button--discreet">
          <span class="c-dropdown__label">Open</span>
          <div class="o-icon o-icon--darkest c-dropdown__caret">
            <i class="fa fa-caret-down"></i>
          </div>
        </button>
        <div class="c-dropdown__list c-dropdown__list--action">
          <a class="c-dropdown__item c-dropdown__item--selected">Open</a>
          <a class="c-dropdown__item">Resolved</a>
        </div>
      </div>
    </div>
    <div class="c-feed__scroll">
      <!-- date delimiter -->
      <div class="c-feed__subheader">Today</div>
      <!-- new comment thread (has snippet) -->
      <div class="c-commentthread">
        <div class="c-comment c-comment--snippet">
          <div class="c-comment__highlight">
            <div class="c-comment__truncation is-light">A gorgeous day.</div>
          </div>
        </div>
        <div class="c-comment">
          <div class="c-comment__byline">
            <div class="c-comment__mini">
              <img class="c-comment__avatar" alt="" style="background-image: url('https://i.ibb.co/Vj4BSGc/angel.jpg')">
              <div class="c-comment__meta"><span class="is-light">Melissa:</span> I love nice days.</div>
            </div>
            <a href="#" class="c-feed__link">Jump to Comment</a>
          </div>
        </div>
      </div>
      <!-- date delimiter -->
      <div class="c-feed__subheader">June 15, 2020</div>
      <!-- new reply (no snippet) -->
      <div class="c-commentthread">
        <div class="c-comment">
          <div class="c-comment__byline">
            <div class="c-comment__mini">
              <img class="c-comment__avatar" alt="" style="background-image: url('https://i.ibb.co/1mXNyNk/flower.jpg')">
              <div class="c-comment__meta"><span class="is-light">Rachel:</span> Me three.</div>
            </div>
            <a href="#" class="c-feed__link">Jump to Thread (2)</a>
          </div>
        </div>
      </div>
      <div class="c-commentthread">
        <div class="c-comment c-comment--snippet">
          <div class="c-comment__highlight">
            <div class="c-comment__truncation is-light">Steel SMACKS him.
            </div>
          </div>
        </div>
        <div class="c-comment">
          <div class="c-comment__byline">
            <div class="c-comment__mini">
              <img class="c-comment__avatar" alt="" style="background-image: url('https://i.ibb.co/Vj4BSGc/angel.jpg')">
              <div class="c-comment__meta"><span class="is-light">Melissa:</span> I truly hate Brick and Steel.</div>
            </div>
            <a href="#" class="c-feed__link">Jump to Thread (2)</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Alternate View (Resolved Comments)

Comments
Open Resolved
Today
A gorgeous day.
Melissa: I love nice days.
John: Me two.
Rachel: I am the very model of a modern Major-General, I've information vegetable, animal, and mineral, I know the kings of England, and I quote the fights historical From Marathon to Waterloo, in order categorical; I'm very well acquainted, too, with matters mathematical, I understand equations, both the simple and quadratical, About binomial theorem I'm teeming with a lot o' news, With many cheerful facts about the square of the hypotenuse.. 
<div class="c-feed is-open">
  <!-- menu item -->
  <button class="c-toolbar__button o-button o-button--discreet">
    <span class="o-button__icon o-icon o-icon--darkest">
      <i class="fa fa-comment-o"></i>
    </span>
    &nbsp;
    <span class="o-button__label o-button__label--full">5 Comments</span>
  </button>

  <!-- dropdown -->
  <div class="c-feed__modal" style="position: relative; top: unset; right: unset; width: 335px;">
    <div class="c-feed__header">
      <!-- dropdown title -->
      <strong>Comments</strong>

      <!-- dropdown to switch views (open, resolved) -->
      <div class="c-dropdown c-dropdown--right c-dropdown--dotted is-open">
        <button class="c-dropdown__button o-button o-button--discreet">
          <span class="c-dropdown__label">Resolved</span>
          <div class="o-icon o-icon--darkest c-dropdown__caret">
            <i class="fa fa-caret-down"></i>
          </div>
        </button>

        <div class="c-dropdown__list c-dropdown__list--action">
          <a class="c-dropdown__item">Open</a>
          <a class="c-dropdown__item c-dropdown__item--selected">Resolved</a>
        </div>
      </div>
    </div>

    <div class="c-feed__scroll">
      <!-- date delimiter -->
      <div class="c-feed__subheader">Today</div>

      <!-- new comment thread (has snippet) -->
      <div class="c-commentthread">
        <div class="c-comment c-comment--actions">
          <button class="c-comment__resolve o-button o-button--inverted">Un-Resolve</button>
        </div>
        <div class="c-comment c-comment--snippet">
          <div class="c-comment__highlight">
            <div class="c-comment__truncation is-light">A gorgeous day.</div>
          </div>
        </div>
        <div class="c-comment">
          <div class="c-comment__byline">
            <div class="c-comment__mini">
              <img class="c-comment__avatar" alt="" style="background-image: url('https://i.ibb.co/Vj4BSGc/angel.jpg')">
              <div class="c-comment__meta"><span class="is-light">Melissa:</span> I love nice days.</div>
            </div>
          </div>
        </div>
        <div class="c-comment">
          <div class="c-comment__byline">
            <div class="c-comment__mini">
              <img class="c-comment__avatar" alt="" style="background-image: url('https://i.ibb.co/1mXNyNk/flower.jpg')">
              <div class="c-comment__meta"><span class="is-light">John:</span> Me two.</div>
            </div>
          </div>
        </div>
        <div class="c-comment">
          <div class="c-comment__byline">
            <div class="c-comment__mini">
              <img class="c-comment__avatar" alt="" style="background-image: url('https://i.ibb.co/1mXNyNk/flower.jpg')">
              <div class="c-comment__meta"><span class="is-light">Rachel:</span> I am the very model of a modern Major-General,
                I've information vegetable, animal, and mineral,
                I know the kings of England, and I quote the fights historical
                From Marathon to Waterloo, in order categorical;
                I'm very well acquainted, too, with matters mathematical,
                I understand equations, both the simple and quadratical,
                About binomial theorem I'm teeming with a lot o' news,
                With many cheerful facts about the square of the hypotenuse..
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>