Comment
Includes styles for comments, for example for a blog section on your site.
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.
| 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
commentrole for each comment.
Support
Franken UI is an independent project free for everyone. Help support it and
expand its component library.