Comments

Overview

A comment communicates messages in an non-blocking way. It’s displayed at the bottom and doesn’t block any other part of the interface.

Structure and Implementation

A comment list is implemented as an unordered list c-comments__list inside a c-comments__container container. Each list item is a comment with class of c-comments__single. Inside, there is a header c-comments__single-header, a delete button that shows up on hover, and the content c-comments__single-body.

Comments
  • Toño
    4 minutes ago

    This is an example comment

  • Billy
    Sep 12 2019

    These comments look way better

  • <!-- Comments start -->
    <div class="c-comments__container o-stack--sm">
      <div class="c-comments__header">
          <h5 class="c-comments__title">
              <svg class="o-icon" aria-hidden="true"> <use href="#comments"></use></svg> Comments
          </h5>
          <button class="c-btn c-btn--outline c-btn--xs">Add Comment</button>
      </div>
      <div class="c-comments__list">
          <!-- Single comment starts -->
          <li class="c-comments__single o-stack--xs">
              <header class="c-comments__single-header">
                  <h6 class="c-comments__single-username">Toño</h6> <span class="c-comments__single-date">4 minutes ago</span>
                  <button class="c-btn c-btn--xs c-btn--destructive c-comments__single-delete">Delete comment</button>
              </header>
              <p class="c-comments__single-body">This is an example comment</p>
          </li>
          <!-- Single comment ends -->
          <!-- Single comment starts -->
          <li class="c-comments__single o-stack--xs">
              <header class="c-comments__single-header">
                  <h6 class="c-comments__single-username">Billy</h6> <span class="c-comments__single-date">Sep 12 2019</span>
                  <button class="c-btn c-btn--xs c-btn--destructive c-comments__single-delete">Delete comment</button>
              </header>
              <p class="c-comments__single-body">These comments look way better</p>
          </li>
          <!-- Single comment ends -->
      </div>
    </div>
    <!-- Comments end -->