Comments

The comments pattern should be used to present feedback and discussion about a news article or blog post.

Comments consist of an author's profile image and name, the date the comment was made and the comment itself. Top level comments also have a reply button that should provide a method of responding to a specific comment.

Rules for comments

The profile image must be 72 pixels wide and 72 pixels high.
A placeholder image should be used when an author does not have a profile image.
Replies should be limited to the first level of comments only.

Comment

A standard comment with the minimal profile information required.

Example

Anonymous

31 September 2018

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cium.

Reply

Code

<!-- Begin pattern: comments //-->
<ul class="comment-list">
    <li class="comment">
        <div class="comment__meta">
            <div class="comment__image"><img src="../../assets/core/images/profile-small.jpg" alt="Anonymous"></div>
            <div class="comment__meta-group">
                <div class="comment__meta-author">Anonymous</div>
                <div class="comment__meta-date">31 September 2018</div>
            </div>
        </div>
        <div class="comment__content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cium.</p>
        </div>
    <a href="#" class="btn btn-tag">Reply</a>
</li>
</ul>
<!-- End pattern: comments //-->

Comment - with linked author

An author can choose to link their profile to a website. If applied, both the profile image and the author's name must be linked to the same website link.

Example

Sophia Adams

31 September 2018

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cium.

Reply

Code

<!-- Begin pattern: comments //-->
<ul class="comment-list">
    <li class="comment">
        <div class="comment__meta">
            <a class="comment__image" href="" tabindex="-1"><img src="../../assets/docs/images/profile-pictures/female-001-small.jpg" alt="Sophia Adams"></a>
            <div class="comment__meta-group">
                <div class="comment__meta-author"><a href="#">Sophia Adams</a></div>
                <div class="comment__meta-date">31 September 2018</div>
            </div>
        </div>
        <div class="comment__content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cium.</p>
        </div>
    <a href="#" class="btn btn-tag">Reply</a>
</li>
</ul>
<!-- End pattern: comments //-->

Comments list - with replies

Comments should appear in a list in the order they were submitted. This example shows how comment replies are displayed.

Comment replies can not be subsequently replied to indivdually. This is limited to the top level of comments only.

Example

Professor Timothy Mooney

31 September 2018

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cium.

Reply

Sophia Adams

31 September 2018

Fusce sollicitudin consectetur cursus. Curabitur non ultricies libero. In dapibus metus quis justo ornare ullamcorper. Sed aliquet, tellus vitae imperdiet maximus, diam neque maximus lacus, et venenatis elit tortor id tortor. In molestie sapien sed dolor lacinia consectetur. Maecenas laoreet finibus tellus, in viverra felis.
Donec ornare ipsum arcu, ac placerat nulla ullamcorper id. Sed sit amet hendrerit libero. Fusce sed consectetur felis, sit amet ullamcorper nulla. Pellentesque mauris tortor, eleifend ut sodales id, vestibulum sed nulla. In aliquet erat at arcu malesuada vehicula quis in felis. Pellentesque porta felis eu magna pharetra, at sagittis turpis porta. Donec euismod, felis at blandit feugiat, est turpis luctus felis, id feugiat nisl purus vel dolor. Cras fermentum tincidunt purus.
Professor Timothy Mooney

1 October 2018

Proin vitae dolor tempus, tincidunt nulla ac, porttitor libero.

Trevor Main

3 October 2018

Etiam mollis ipsum est, ac lobortis tellus consectetur ut. Integer at convallis purus. Donec et urna eu est mollis fringilla at id urna. Maecenas erat nulla, scelerisque at ornare imperdiet, varius a mauris.

Reply
Mia Sikorski

4 October 2018

Integer ut enim vel metus maximus molestie. In felis magna, porttitor quis placerat vel, pharetra sit amet nulla. Cras sed sodales lectus. Fusce luctus condimentum neque et commodo. Suspendisse congue dui quis congue aliquet. Cras finibus, odio vitae finibus rutrum, tellus urna ullamcorper diam, at interdum augue lacus sit amet nunc.

Reply

Sophia Adams

11 October 2018

Mauris eget leo quis dui condimentum consectetur eget in lorem. Quisque rutrum ultrices ligula, vitae tincidunt justo faucibus nec. Donec in odio tristique, rhoncus ipsum eu, imperdiet dui. Mauris a risus nec arcu lacinia auctor a sed nisi. Cras sed risus a ligula viverra auctor quis eget tellus. Vestibulum ut lacinia velit, ultrices finibus felis. Mauris iaculis nisl velit, eget gravida nisi varius nec. Donec vel lorem libero. Fusce at scelerisque sapien.

Code

<!-- Begin pattern: comments //-->
<ul class="comment-list">
    <li class="comment">
        <div class="comment__meta">
            <a class="comment__image" href="" tabindex="-1"><img src="../../assets/docs/images/profile-pictures/male-004-small.jpg" alt="Professor Timothy Mooney"></a>
            <div class="comment__meta-group">
                <div class="comment__meta-author"><a href="#">Professor Timothy Mooney</a></div>
                <div class="comment__meta-date">31 September 2018</div>
            </div>
        </div>
        <div class="comment__content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cium.</p>
        </div>
    <a href="#" class="btn btn-tag">Reply</a>
</li>
    <ul class="comment__replies">
    <li class="comment comment--reply">
        <div class="comment__meta">
            <a class="comment__image" href="" tabindex="-1"><img src="../../assets/docs/images/profile-pictures/female-001-small.jpg" alt="Sophia Adams"></a>
            <div class="comment__meta-group">
                <div class="comment__meta-author"><a href="#">Sophia Adams</a></div>
                <div class="comment__meta-date">31 September 2018</div>
            </div>
        </div>
        <div class="comment__content">
            <p>Fusce sollicitudin consectetur cursus. Curabitur non ultricies libero. In dapibus metus quis justo ornare ullamcorper. Sed aliquet, tellus vitae imperdiet maximus, diam neque maximus lacus, et venenatis elit tortor id tortor. In molestie sapien sed dolor lacinia consectetur. Maecenas laoreet finibus tellus, in viverra felis.</p><p>Donec ornare ipsum arcu, ac placerat nulla ullamcorper id. Sed sit amet hendrerit libero. Fusce sed consectetur felis, sit amet ullamcorper nulla. Pellentesque mauris tortor, eleifend ut sodales id, vestibulum sed nulla. In aliquet erat at arcu malesuada vehicula quis in felis. Pellentesque porta felis eu magna pharetra, at sagittis turpis porta. Donec euismod, felis at blandit feugiat, est turpis luctus felis, id feugiat nisl purus vel dolor. Cras fermentum tincidunt purus.</p>
        </div>
    </li>
    <li class="comment comment--reply">
        <div class="comment__meta">
            <a class="comment__image" href="" tabindex="-1"><img src="../../assets/docs/images/profile-pictures/male-004-small.jpg" alt="Professor Timothy Mooney"></a>
            <div class="comment__meta-group">
                <div class="comment__meta-author"><a href="#">Professor Timothy Mooney</a></div>
                <div class="comment__meta-date">1 October 2018</div>
            </div>
        </div>
        <div class="comment__content">
            <p>Proin vitae dolor tempus, tincidunt nulla ac, porttitor libero.</p>
        </div>
    </li>
    </ul>
    <li class="comment">
        <div class="comment__meta">
            <div class="comment__image"><img src="../../assets/core/images/profile-small.jpg" alt="Trevor Main"></div>
            <div class="comment__meta-group">
                <div class="comment__meta-author">Trevor Main</div>
                <div class="comment__meta-date">3 October 2018</div>
            </div>
        </div>
        <div class="comment__content">
            <p>Etiam mollis ipsum est, ac lobortis tellus consectetur ut. Integer at convallis purus. Donec et urna eu est mollis fringilla at id urna. Maecenas erat nulla, scelerisque at ornare imperdiet, varius a mauris.</p>
        </div>
    <a href="#" class="btn btn-tag">Reply</a>
</li>
    <li class="comment">
        <div class="comment__meta">
            <a class="comment__image" href="" tabindex="-1"><img src="../../assets/core/images/profile-small.jpg" alt="Mia Sikorski"></a>
            <div class="comment__meta-group">
                <div class="comment__meta-author"><a href="#">Mia Sikorski</a></div>
                <div class="comment__meta-date">4 October 2018</div>
            </div>
        </div>
        <div class="comment__content">
            <p>Integer ut enim vel metus maximus molestie. In felis magna, porttitor quis placerat vel, pharetra sit amet nulla. Cras sed sodales lectus. Fusce luctus condimentum neque et commodo. Suspendisse congue dui quis congue aliquet. Cras finibus, odio vitae finibus rutrum, tellus urna ullamcorper diam, at interdum augue lacus sit amet nunc.</p>
        </div>
    <a href="#" class="btn btn-tag">Reply</a>
</li>
    <ul class="comment__replies">
    <li class="comment comment--reply">
        <div class="comment__meta">
            <a class="comment__image" href="" tabindex="-1"><img src="../../assets/docs/images/profile-pictures/female-001-small.jpg" alt="Sophia Adams"></a>
            <div class="comment__meta-group">
                <div class="comment__meta-author"><a href="#">Sophia Adams</a></div>
                <div class="comment__meta-date">11 October 2018</div>
            </div>
        </div>
        <div class="comment__content">
            <p>Mauris eget leo quis dui condimentum consectetur eget in lorem. Quisque rutrum ultrices ligula, vitae tincidunt justo faucibus nec. Donec in odio tristique, rhoncus ipsum eu, imperdiet dui. Mauris a risus nec arcu lacinia auctor a sed nisi. Cras sed risus a ligula viverra auctor quis eget tellus. Vestibulum ut lacinia velit, ultrices finibus felis. Mauris iaculis nisl velit, eget gravida nisi varius nec. Donec vel lorem libero. Fusce at scelerisque sapien.</p>
        </div>
    </li>
    </ul>
</ul>
<!-- End pattern: comments //-->