Comment

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

Table of contents

• Usage
• Primary modifier
• Lists
• Accessibility

Usage

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

Class	Description
.uk-comment	Add this class to define the Comment component.
.uk-comment-body	Add this class to create a comment body.
.uk-comment-header	Add this class to create a comment header.
.uk-comment-title	Add this class to a heading to create a comment title.
.uk-comment-meta	Add this class to create meta text about your comment.
.uk-comment-avatar	Add this class to an <img> element to create an avatar for the comment author.

Primary modifier

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

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.

Accessibility

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

• Set the comment role for each comment.