Comments
Display commentary & conversations between users
Single Comment
This represents the markup necessary to style a single comment, irrespective of its context.
<div class="qw-comment">
<a href="#" class="qw-comment-avatar">
<img src="~/Content/img/spaceman.png" alt="Spaceman Spiff profile picture" class="qw-avatar" />
</a>
<div class="qw-comment-content">
<a href="#" class="qw-comment-author">Comment Author</a>
<div class="qw-comment-metadata">Metadata</div>
<div class="qw-comment-text">
<p>Comment text…</p>
</div>
<div class="comment-actions">
<button type="button" class="btn btn-xs btn-link qw-comment-action">Action Button</button>
</div>
</div>
</div>
New comment form
The comment entry form in prepended by the avatar of the user, to indicate who is leaving the comment. The comment field is a textarea with an initial height of 1 row that 'autogrows' as the text line-length exceeds the width of the field. It is nested in a .qw-comment.
<div class="qw-comment qw-comment-top-level">
<a class="qw-comment-avatar">
<img class="qw-avatar" src="~/Content/img/spaceman.png" alt="Spaceman Spiff profile picture">
</a>
<form class="qw-comment-content">
<div class="qw-comment-input-group">
<textarea name="" id="" class="qw-comment-textarea" rows="1"></textarea>
<button class="btn btn-post-comment">
<span class="fa fa-paper-plane mr-1"></span> Post
</button>
</div>
</form>
</div>
Basic comment list
Nest a series of comments inside a .qw-comments. If appropriate, append the new comment form after the last comment.
<div class="qw-comments qw-flow-content">
<div class="qw-comment">...</div>
<div class="qw-comment">...</div>
</div>
Threaded comment
A comment list can be threaded to show the relationship between conversations. Comment replies are appended to .qw-comment-content and given a .qw-comment-reply.
Replies are added after the last reply, regardless of which comment in the thread they are a reply to, including the parent.
Ni hao! This is a top-level comment. Any replies to it will be indented.
Hola! This comment is a reply and is indented.
I'm a second paragraph for the comment to show spacing.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Soluta repudiandae officia, explicabo labore deleniti asperiores harum, inventore odit rerum totam deserunt provident incidunt accusantium alias omnis. Delectus ipsum voluptas quidem?
<div class="qw-comments">
<div class="qw-comment qw-comment-top-level">
<a href="#" class="qw-comment-avatar">...</a>
<div class="comment-content">
<a href="#" class="qw-comment-author">...</a>
<div class="qw-comment-metadata">...</div>
<div class="qw-comment-text">...</div>
<div class="qw-comment-action-list">...</div>
<div class="qw-comment qw-comment-reply">...</div>
</div>
</div>
</div>
Overview of CSS classes
| Selector | Summary |
|---|---|
| .qw-comments | Container for a collection of comments. |
| .qw-comment | A single comment in a news feed |
| .qw-comment-avatar | Region for the commenter's avatar |
| .qw-comment-content | Region for the contents of a comment |
| .qw-comment-author | |
| .qw-comment-metadata | Region that contains metadata about the comment |
| .qw-comment-text | The text as written by the comment author |
| .qw-comment-action-list | Region for quick action items for the comment |
| .qw-comment-action | Action items within the comment. Contained within the .qw-comment-action-list |
| .qw-comment-action-danger | Desctructive action items. Coupled with .qw-comment-action |
Comment text…