Comment-thread
Issue comment stream: a vertical stack (16px gaps) of .comment rows and, typically, a trailing .comment-editor reply box. Replies nest one level via .comment-replies inside the parent comment's content.
Root: .comment-thread on <div>, <section>
Example
<div class="comment-thread"><div class="comment"><div class="comment-avatar"><span class="avatar avatar-md">DK</span></div><div class="comment-content"><div class="comment-meta"><span class="comment-author">Dana Kim</span><span class="comment-time">2 hours ago</span></div><div class="comment-body"><p>Looks good to me.</p></div></div></div><div class="comment-editor"><span class="avatar avatar-md">JC</span><textarea class="form-control" aria-label="Add a comment" placeholder="Add a comment…"></textarea></div></div>Contract
Structure
| Selector | Required | Description |
|---|---|---|
.comment | optional | The comment rows. A thread may momentarily hold only the editor (no comments yet). |
.comment-editor | optional | Reply box, usually last in the thread. |
Accessibility
Order comments chronologically in the DOM — the visual stack matches reading order. For long threads consider a list structure (role="list"/"listitem" or ol/li) so assistive tech can announce position and count.
Nesting
Allowed in:
page content.card-body.drawer-body.tab-panel
Never inside (or containing):
.comment-thread
Subcomponents
Comment
One comment: avatar column plus content column holding a meta line (author, timestamp), the body, an actions row (Reply/Edit links), and optionally a .comment-replies rail of nested reply comments.
Root: .comment on <div>, <article>, <li>
Example
<div class="comment"><div class="comment-avatar"><span class="avatar avatar-md">DK</span></div><div class="comment-content"><div class="comment-meta"><span class="comment-author">Dana Kim</span><span class="comment-time">2 hours ago</span></div><div class="comment-body"><p>Confirmed on staging.</p></div><div class="comment-actions"><a href="#">Reply</a><a href="#">Edit</a></div></div></div>Structure
| Selector | Required | Description |
|---|---|---|
.comment-content | required | The flexible content column (flex: 1, min-width: 0). |
.comment-body | required | The comment text, inside .comment-content. |
.comment-avatar | optional | Leading avatar column (flex-shrink: 0) holding an .avatar. |
.comment-meta | optional | Baseline-aligned row: .comment-author (medium weight) then .comment-time (small, subtlest). |
.comment-actions | optional | Small subtle links (Reply, Edit…) that take the link color on hover. |
.comment-replies | optional | Indented rail (2px inline-start separator border) stacking nested reply .comment rows, inside .comment-content. |
Accessibility
Render timestamps with <time datetime="…"> when possible. .comment-actions must be real links or buttons. Avatar initials are decorative when the author name is visible in .comment-meta; keep the .avatar text as initials only.
Nesting
Allowed in:
.comment-thread.comment-replies
Never inside (or containing):
a .comment placed directly inside another .comment — nested replies must sit inside a .comment-replies rail
Comment-editor
Reply box: the current user's avatar beside a .form-control textarea. Usually the last row of a .comment-thread; also usable inside .comment-replies for inline replying.
Root: .comment-editor on <div>, <form>
Example
<div class="comment-editor"><span class="avatar avatar-md">JC</span><textarea class="form-control" aria-label="Add a comment" placeholder="Add a comment…"></textarea></div>Structure
| Selector | Required | Description |
|---|---|---|
textarea.form-control | required | The reply textarea (flex: 1). |
Accessibility
| On | Attribute | Level | When |
|---|---|---|---|
textarea.form-control | aria-label | recommended | Always unless a visible <label for> is associated with the textarea — the placeholder alone is not a name. |
Give the textarea a programmatic name (aria-label or a visible label) — placeholder text is not an accessible name. If submission is involved, make the editor a <form> with a real submit button.
Nesting
Allowed in:
.comment-thread.comment-replies
Never inside (or containing):
.comment-editor
Looks good to me.