Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. It uses a class to add CSS to the elements.
Comments are an excellent way to display user feedback and interact about the content with other users. Semantic UI provides us with a styled comment element. Let's have a look at various comment content.
Semantic UI Comment Variations:
- Avatar: This class allows us to add avatars that represent a user's social image.
- Metadata: This class allows us to add metadata to the comments such as date of origin, number of likes, number of dislikes
- Actions: This class allows us to interact with the comment, such as saving the comment, like the comment, dislike the comment, etc.
- Reply Form: This class allows us to add a reply form to comment. The user can reply directly to the comment using this form.
Syntax:
<div class="ui comments">
<div class="comment">
...
<div class="content">
...
</div>
</div>
</div>
Note: Use the above syntax according to the need by using a combination of the above-mentioned classes. Refer to the examples below for a better understanding of the classes.
Example 1: In the below example, we have created a comment avatar.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Comment Content</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
</head>
<body>
<div class="ui container">
<h2 class="ui green header">GeeksforGeeks</h2>
<h4>Semantic UI Comment Content</h4>
<hr>
<br />
<div class="ui comments">
<h2 class="ui dividing header">Comments</h2>
<div class="comment">
<a class="avatar">
<img src=
"https://media.geeksforgeeks.org/img-practice/user_web-1598433228.svg">
</a>
<div class="content">
<a class="author">Mr. Anonymous</a>
<div class="text">
I am watching you. I know all about you.
</div>
<div class="actions">
<a class="reply">Reply</a>
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
<img src=
"https://media.geeksforgeeks.org/img-practice/user_web-1598433228.svg">
</a>
<div class="content">
<a class="author">Praneeth</a>
<div class="text">
Lol. You know nothing about me.
</div>
<div class="actions">
<a class="reply">Reply</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
Example 2: In the below example, we have created comments with metadata.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Comment Content</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
</head>
<body>
<div class="ui container">
<h2 class="ui green header">GeeksforGeeks</h2>
<h4>Semantic UI Comment Content</h4>
<hr>
<br />
<div class="ui comments">
<h2 class="ui dividing header">Comments</h2>
<div class="comment">
<a class="avatar">
<img src=
"https://media.geeksforgeeks.org/img-practice/user_web-1598433228.svg">
</a>
<div class="content">
<a class="author">Mr. Anonymous</a>
<div class="metadata">
<div class="date">5 minutes ago</div>
<div class="rating">
<i class="thumbs up icon"></i>
100 Likes
</div>
<div class="rating">
<i class="thumbs down icon"></i>
5 Likes
</div>
</div>
<div class="text">
I am watching you. I know all about you.
</div>
<div class="actions">
<a class="reply">Reply</a>
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
<img src=
"https://media.geeksforgeeks.org/img-practice/user_web-1598433228.svg">
</a>
<div class="content">
<a class="author">Praneeth</a>
<div class="metadata">
<div class="date">3 minutes ago</div>
<div class="rating">
<i class="thumbs up icon"></i>
6 Likes
</div>
<div class="rating">
<i class="thumbs down icon"></i>
58 Likes
</div>
</div>
<div class="text">
Lol. You know nothing about me.
</div>
<div class="actions">
<a class="reply">Reply</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
Example 3: In the below example, we have created comments with actions.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Comment Content</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
</head>
<body>
<div class="ui container">
<h2 class="ui green header">GeeksforGeeks</h2>
<h4>Semantic UI Comment Content</h4>
<hr>
<br />
<div class="ui comments">
<h2 class="ui dividing header">Comments</h2>
<div class="comment">
<a class="avatar">
<img src=
"https://media.geeksforgeeks.org/img-practice/user_web-1598433228.svg">
</a>
<div class="content">
<a class="author">Mr. Anonymous</a>
<div class="metadata">
<div class="date">5 minutes ago</div>
<div class="rating">
<i class="thumbs up icon"></i>
100 Likes
</div>
<div class="rating">
<i class="thumbs down icon"></i>
5 Likes
</div>
</div>
<div class="text">
I am watching you. I know all about you.
</div>
<div class="actions">
<a class="reply">Reply</a>
<a class="like">
<i class="thumbs up icon"></i>
Like
</a>
<a class="dislike">
<i class="thumbs down icon"></i>
Dislike
</a>
<a class="save">
Save
</a>
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
<img src=
"https://media.geeksforgeeks.org/img-practice/user_web-1598433228.svg">
</a>
<div class="content">
<a class="author">Praneeth</a>
<div class="metadata">
<div class="date">3 minutes ago</div>
<div class="rating">
<i class="thumbs up icon"></i>
6 Likes
</div>
<div class="rating">
<i class="thumbs down icon"></i>
58 Likes
</div>
</div>
<div class="text">
Lol. You know nothing about me.
</div>
<div class="actions">
<a class="reply">Reply</a>
<a class="like">
<i class="thumbs up icon"></i>
Like
</a>
<a class="dislike">
<i class="thumbs down icon"></i>
Dislike
</a>
<a class="save">
Save
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
Example 4: In the below example, we have created comments with a reply form.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Comment Content</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
</head>
<body>
<div class="ui container">
<h2 class="ui green header">GeeksforGeeks</h2>
<h4>Semantic UI Comment Content</h4>
<hr>
<br />
<div class="ui comments">
<h2 class="ui dividing header">Comments</h2>
<div class="comment">
<a class="avatar">
<img src=
"https://media.geeksforgeeks.org/img-practice/user_web-1598433228.svg">
</a>
<div class="content">
<a class="author">Mr. Anonymous</a>
<div class="metadata">
<div class="date">5 minutes ago</div>
<div class="rating">
<i class="thumbs up icon"></i>
100 Likes
</div>
<div class="rating">
<i class="thumbs down icon"></i>
5 Likes
</div>
</div>
<div class="text">
I am watching you. I know all about you.
</div>
<div class="actions">
<a class="reply">Reply</a>
<a class="like">
<i class="thumbs up icon"></i>
Like
</a>
<a class="dislike">
<i class="thumbs down icon"></i>
Dislike
</a>
<a class="save">
Save
</a>
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
<img src=
"https://media.geeksforgeeks.org/img-practice/user_web-1598433228.svg">
</a>
<div class="content">
<a class="author">Praneeth</a>
<div class="metadata">
<div class="date">3 minutes ago</div>
<div class="rating">
<i class="thumbs up icon"></i>
6 Likes
</div>
<div class="rating">
<i class="thumbs down icon"></i>
58 Likes
</div>
</div>
<div class="text">
Lol. You know nothing about me.
</div>
<div class="actions">
<a class="reply">Reply</a>
<a class="like">
<i class="thumbs up icon"></i>
Like
</a>
<a class="dislike">
<i class="thumbs down icon"></i>
Dislike
</a>
<a class="save">
Save
</a>
</div>
<form class="ui reply form">
<div class="field">
<textarea></textarea>
</div>
<div class="ui primary submit labeled icon button">
<i class="icon edit"></i> Add Reply
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
Reference: https://semantic-ui.com/views/comment.html