Thread
Comments and their replies, each joined by a line to the comment it answers.
On this page
A thread is comments and their replies: the discussion under a document, a review or an issue. A comment is an avatar on a column and its words beside it. Replies stand under the words, and a hairline runs down from the comment's avatar and turns into each of them, so a reader follows a line, not an indent, to see what answers what.
Thread
<div class="card max-w(480) mx-auto"> <ol class="thread"> <li class="thread-item"> <span class="thread-avatar"> <span class="avatar">AL</span> </span> <div class="thread-body"> <p class="thread-header"> <span class="thread-author">Ada Lovelace</span> <time class="thread-meta" datetime="2026-11-12T09:12">2h</time> </p> <p class="thread-text">The focus ring is cut by the mask. Should it move to the group?</p> </div> <ol class="thread-replies"> <li class="thread-item"> <span class="thread-avatar"> <span class="avatar avatar-sm">AT</span> </span> <div class="thread-body"> <p class="thread-header"> <span class="thread-author">Alan Turing</span> <time class="thread-meta" datetime="2026-11-12T10:05">1h</time> </p> <p class="thread-text">Yes. The group already has the corner, so the ring follows it.</p> </div> </li> <li class="thread-item"> <span class="thread-avatar"> <span class="avatar avatar-sm">GH</span> </span> <div class="thread-body"> <p class="thread-header"> <span class="thread-author">Grace Hopper</span> <time class="thread-meta" datetime="2026-11-12T10:31">35m</time> </p> <p class="thread-text">I will make the change this afternoon.</p> </div> </li> </ol> </li> <li class="thread-item"> <span class="thread-avatar"> <span class="avatar">KJ</span> </span> <div class="thread-body"> <p class="thread-header"> <span class="thread-author">Katherine Johnson</span> <time class="thread-meta" datetime="2026-11-12T10:54">12m</time> </p> <p class="thread-text">The figures in the second table are right.</p> </div> </li> </ol></div>#Structure
A thread is a list, and each thread-item is one comment with three children, in this order:
thread-avatar, around an avatar. It is the column the line runs down.thread-body, the words: athread-headerwith thethread-authorand athread-metabeside the name, then onethread-textfor each paragraph. Both keep no margin of their own, whatever the page gives a paragraph. Anything else may follow: a quote, a row of quiet buttons.thread-replies, when there are any: a list ofthread-items that answer this one.
The line appears by itself when replies follow a comment, and each reply is joined to it by an elbow that stops short of its avatar. The pieces of the line never overlap, because its ink is translucent and two layers would show as a darker stretch.
#Nesting
A reply can have replies: put a thread-replies inside it and the line continues one level in. A comment's avatar is 32px, the default avatar; a reply's is 24px, avatar-sm, at every depth.
Two or three levels are enough. Each level costs 36px of width, and a deep thread on a phone leaves no room for its words: past that, start the reply with the name of the person it answers and keep it on the same level.
Nesting
<div class="card max-w(480) mx-auto"> <ol class="thread"> <li class="thread-item"> <span class="thread-avatar"> <span class="avatar">GH</span> </span> <div class="thread-body"> <p class="thread-header"> <span class="thread-author">Grace Hopper</span> <time class="thread-meta" datetime="2026-11-12T08:02">3h</time> </p> <p class="thread-text">Can we ship the contracts before the framework components?</p> </div> <ol class="thread-replies"> <li class="thread-item"> <span class="thread-avatar"> <span class="avatar avatar-sm">AL</span> </span> <div class="thread-body"> <p class="thread-header"> <span class="thread-author">Ada Lovelace</span> <time class="thread-meta" datetime="2026-11-12T08:40">2h</time> </p> <p class="thread-text">Yes, they do not depend on each other.</p> </div> <ol class="thread-replies"> <li class="thread-item"> <span class="thread-avatar"> <span class="avatar avatar-sm">GH</span> </span> <div class="thread-body"> <p class="thread-header"> <span class="thread-author">Grace Hopper</span> <time class="thread-meta" datetime="2026-11-12T08:44">2h</time> </p> <p class="thread-text">Then Tuesday.</p> </div> </li> </ol> </li> </ol> </li> </ol></div>#Thread or message
A thread is a discussion about something: comments are equals and any of them can be answered. A message is a turn of a conversation between two sides, as a bubble that points at its author. Events that nobody answers are a timeline.
#Accessibility
- Write the thread as an
<ol>and the replies as nested<ol>s. The nesting is the relation: a screen reader announces the level and the number of replies, which is what the line shows the eye. - Give each time a
<time>with adatetime, since "2h" is short for something exact. - The line is drawn by the stylesheet and is not announced. In forced colors it takes the text color.
- An avatar that shows initials or a photo beside the author's name is decoration: the name is already there in words.
#Classes
| Class | Description |
|---|---|
thread | The list of comments, 20px apart |
thread-item | One comment: its avatar on a column, its words beside it and its replies under the words |
thread-avatar | The avatar's column, around an avatar; under the avatar the line begins when replies follow |
thread-body | The words: a thread-header and the thread-text under it. The first line is level with the middle of the avatar |
thread-header | The first line of the body: the author, and the time beside the name |
thread-text | What they wrote, in the body under the header; several paragraphs stand 8px apart |
thread-author | Who wrote it, in strong ink |
thread-meta | When, and anything else said quietly beside the name |
thread-replies | The list of replies inside a thread-item, after its body; each reply is a thread-item joined to the comment by an elbow of the line |
#Custom properties
| Property | Default | Description |
|---|---|---|
--thread-avatar | 2rem | Size of a comment's avatar; replies use 1.5rem |
--thread-gap | .75rem | Space between an avatar and its words |
--thread-space | 1.25rem | Space between comments; replies stand .875rem apart |