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.
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 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 -->
Comments
Toño
4 minutes agoThis is an example comment
Billy
Sep 12 2019These comments look way better