Comment
Avatar, author, time, body and actions. Replies nest with a hairline.
Examples
Comment
The φ scale reads much calmer at compact density.
Agreed. Let's make it the default for data views.
Anatomy
article.comment | Two columns: avatar, then the comment. |
> .avatar | Who wrote it. |
> div | The comment column, stacked tightly. |
div > header | Author in <b>, then a <time>, small and muted, on one baseline. |
div > p | The body. |
div > footer | Actions as bare text buttons, extra small and muted until hovered. |
div > .comment | Optional replies: nested comments, indented behind a hairline. |
Accessibility
- Every comment has the same "Reply" button. Add an
aria-labelsuch as "Reply to Ada" so they differ out of context. - Give
<time>adatetimeattribute; "2h" is relative and goes stale. - Initials in the avatar duplicate the author name; mark the avatar
aria-hidden="true"so the name isn't read twice.