Comment

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

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
.uk-commentAdd this class to define the Comment component.
.uk-comment-bodyAdd this class to create a comment body.
.uk-comment-headerAdd this class to create a comment header.
.uk-comment-titleAdd this class to a heading to create a comment title.
.uk-comment-metaAdd this class to create meta text about your comment, e.g. a subnav.
.uk-comment-avatarAdd this class to an <img> element to create an avatar for the comment author.
<article class="uk-comment">
  <header class="uk-comment-header">
    <img class="uk-comment-avatar" src="" width="" height="" alt="" />
    <h4 class="uk-comment-title"></h4>
    <ul class="uk-comment-meta uk-subnav"></ul>
  </header>
  <div class="uk-comment-body"></div>
</article>
Copy to clipboard
  • <article class="uk-comment" role="comment">
      <header class="uk-comment-header">
        <div class="uk-grid uk-flex-middle uk-grid-medium" uk-grid>
          <div class="uk-width-auto">
            <img
              class="uk-comment-avatar"
              src="/images/avatar.jpg"
              width="80"
              height="80"
              alt=""
            />
          </div>
          <div class="uk-width-expand">
            <h4 class="uk-comment-title uk-margin-remove">
              <a class="uk-link-reset" href="#">Author</a>
            </h4>
            <ul
              class="uk-subnav-divider uk-comment-meta uk-margin-remove-top uk-subnav"
            >
              <li><a href="#">12 days ago</a></li>
              <li><a href="#">Reply</a></li>
            </ul>
          </div>
        </div>
      </header>
      <div class="uk-comment-body">
        <p>
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
          eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
          voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
          clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
          amet.
        </p>
      </div>
    </article>

Primary modifier

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

<article class="uk-comment uk-comment-primary">...</article>
Copy to clipboard
  • <article class="uk-comment uk-comment-primary" role="comment">
      <header class="uk-comment-header">
        <div class="uk-grid uk-flex-middle uk-grid-medium" uk-grid>
          <div class="uk-width-auto">
            <img
              class="uk-comment-avatar"
              src="/images/avatar.jpg"
              width="80"
              height="80"
              alt=""
            />
          </div>
          <div class="uk-width-expand">
            <h4 class="uk-comment-title uk-margin-remove">
              <a class="uk-link-reset" href="#">Author</a>
            </h4>
            <ul
              class="uk-subnav-divider uk-comment-meta uk-margin-remove-top uk-subnav"
            >
              <li><a href="#">12 days ago</a></li>
              <li><a href="#">Reply</a></li>
            </ul>
          </div>
        </div>
      </header>
      <div class="uk-comment-body">
        <p>
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
          eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
          voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
          clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
          amet.
        </p>
      </div>
    </article>

Lists

Add the .uk-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="uk-comment-list">
  <li>
    <article class="uk-comment">...</article>
    <ul>
      <li>
        <article class="uk-comment">...</article>
      </li>
    </ul>
  </li>
</ul>
Copy to clipboard
  • <ul class="uk-comment-list">
      <li>
        <article class="uk-comment uk-visible-toggle" tabindex="-1" role="comment">
          <header class="uk-comment-header uk-position-relative">
            <div class="uk-grid uk-flex-middle uk-grid-medium" uk-grid>
              <div class="uk-width-auto">
                <img
                  class="uk-comment-avatar"
                  src="/images/avatar.jpg"
                  width="80"
                  height="80"
                  alt=""
                />
              </div>
              <div class="uk-width-expand">
                <h4 class="uk-comment-title uk-margin-remove">
                  <a class="uk-link-reset" href="#">Author</a>
                </h4>
                <p class="uk-comment-meta uk-margin-remove-top">
                  <a class="uk-link-reset" href="#">12 days ago</a>
                </p>
              </div>
            </div>
            <div class="uk-position-top-right uk-position-small uk-hidden-hover">
              <a class="uk-link-muted" href="#">Reply</a>
            </div>
          </header>
          <div class="uk-comment-body">
            <p>
              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
              nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
              sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
              rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
              ipsum dolor sit amet.
            </p>
          </div>
        </article>
        <ul>
          <li>
            <article
              class="uk-comment uk-comment-primary uk-visible-toggle"
              tabindex="-1"
              role="comment"
            >
              <header class="uk-comment-header uk-position-relative">
                <div class="uk-grid uk-flex-middle uk-grid-medium" uk-grid>
                  <div class="uk-width-auto">
                    <img
                      class="uk-comment-avatar"
                      src="/images/avatar.jpg"
                      width="80"
                      height="80"
                      alt=""
                    />
                  </div>
                  <div class="uk-width-expand">
                    <h4 class="uk-comment-title uk-margin-remove">
                      <a class="uk-link-reset" href="#">Author</a>
                    </h4>
                    <p class="uk-comment-meta uk-margin-remove-top">
                      <a class="uk-link-reset" href="#">12 days ago</a>
                    </p>
                  </div>
                </div>
                <div
                  class="uk-position-top-right uk-position-small uk-hidden-hover"
                >
                  <a class="uk-link-muted" href="#">Reply</a>
                </div>
              </header>
              <div class="uk-comment-body">
                <p>
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
                  nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
                  erat, sed diam voluptua. At vero eos et accusam et justo duo
                  dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
                  sanctus est Lorem ipsum dolor sit amet.
                </p>
              </div>
            </article>
          </li>
          <li>
            <article
              class="uk-comment uk-visible-toggle"
              tabindex="-1"
              role="comment"
            >
              <header class="uk-comment-header uk-position-relative">
                <div class="uk-grid uk-flex-middle uk-grid-medium" uk-grid>
                  <div class="uk-width-auto">
                    <img
                      class="uk-comment-avatar"
                      src="/images/avatar.jpg"
                      width="80"
                      height="80"
                      alt=""
                    />
                  </div>
                  <div class="uk-width-expand">
                    <h4 class="uk-comment-title uk-margin-remove">
                      <a class="uk-link-reset" href="#">Author</a>
                    </h4>
                    <p class="uk-comment-meta uk-margin-remove-top">
                      <a class="uk-link-reset" href="#">12 days ago</a>
                    </p>
                  </div>
                </div>
                <div
                  class="uk-position-top-right uk-position-small uk-hidden-hover"
                >
                  <a class="uk-link-muted" href="#">Reply</a>
                </div>
              </header>
              <div class="uk-comment-body">
                <p>
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
                  nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
                  erat, sed diam voluptua. At vero eos et accusam et justo duo
                  dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
                  sanctus est Lorem ipsum dolor sit amet.
                </p>
              </div>
            </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="uk-comment-list">
  <li>
    <article class="uk-comment" role="comment">...</article>
    <ul>
      <li>
        <article class="uk-comment" role="comment">...</article>
      </li>
    </ul>
  </li>
</ul>

Theme development

On your tailwind.config.js file, add the Comment component within the ui() plugin.

import ui from "franken-ui";

ui({
    components: {
        comment: {
            hooks: {},
            media: true
        }
    }
}),

Available hooks

Note If you are developing theme from scratch, you can use all these hooks. If you’re using the shadcn/ui theme, some hooks might not work as they were already in use or removed. Learn more about using hooks.

Hook NameAffected Classes
hook-comment.uk-comment
hook-body.uk-comment-body
hook-header.uk-comment-header
hook-title.uk-comment-title
hook-meta.uk-comment-meta
hook-avatar.uk-avatar
hook-list-adjacent.uk-comment-list > :nth-child(n + 2)
hook-list-sub.uk-comment-list .uk-comment ~ ul
hook-list-sub-adjacent.uk-comment-list .uk-comment ~ ul > :nth-child(n + 2)
hook-primary.uk-comment-primary
hook-misc*