0build.dev
Playground

Comment

Includes styles for comments, for example for a blog section on your site.

Report an IssueContexts

Table of contents

Usage

The Comment component consists of the comment itself, a comment header, including an avatar, a title and meta text, and a comment body.

ClassDescription
.z-commentAdd this class to define the Comment component.
.z-comment-bodyAdd this class to create a comment body.
.z-comment-headerAdd this class to create a comment header.
.z-comment-titleAdd this class to a heading to create a comment title.
.z-comment-metaAdd this class to create meta text about your comment.
.z-comment-avatarAdd this class to an <img> element to create an avatar for the comment author.
<article class="z-comment">
  <header class="z-comment-header">
    <div class="z-comment-avatar">
      <img src="" alt="" />
    </div>
    <div class="z-comment-title"></div>
    <ul class="z-comment-meta z-subnav"></ul>
  </header>
  <div class="z-comment-body"></div>
</article>

Primary modifier

To style a comment differently, for example to highlight it as the admin’s comment, just add the .z-comment-primary class.

<article class="z-comment z-comment-primary">...</article>

Lists

Add the .z-comment-list class to a <ul> element to create a list of comments. You can nest any number of <ul> elements inside a comment list.

<ul class="z-comment-list">
  <li>
    <article class="z-comment">...</article>
    <ul>
      <li>
        <article class="z-comment">...</article>
      </li>
    </ul>
  </li>
</ul>

Accessibility

Set the appropriate WAI-ARIA roles, states and properties to the Comment component.

  • Set the comment role for each comment.
<ul class="z-comment-list">
  <li>
    <article class="z-comment" role="comment">...</article>
    <ul>
      <li>
        <article class="z-comment" role="comment">...</article>
      </li>
    </ul>
  </li>
</ul>