We're sorry, but this feature is not yet available. We are working hard to make it happen as soon as possible. Thank you for your patience and understanding. Please check back later for updates.
The element you clicked is for demonstration purposes only and does not lead to actual content. Everything you see here is a simulation intended to demonstrate how the UI elements might look and behave in a real application.
Includes styles for comments, for example for a blog section on your site.
Note If you are not using Tailwind
CSS, you can skip this step. 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
}
}
}),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, e.g. a subnav. |
.uk-comment-avatar | Add 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>
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.
<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>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>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.
<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>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><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>Learn more about using hooks.
| Hook Name | Affected 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 | * |
Set the appropriate WAI-ARIA roles, states and properties to the Comment component.
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>
Author
12 days ago
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.
Author
12 days ago
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.
Author
12 days ago
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.