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 semantic UI-styled comment element. Let's have a look at various comment variations along with examples.
Semantic UI Comment Variations:
- Threaded: Semantic UI allows us to connect multiple comments, thereby illustrating the relationship among them.
- Minimal: Unless the user hovers over a comment, Semantic UI hides additional information from the user's view.
- Size: Semantic UI allows us to change the size of the comments using various classes.
Syntax:
<div class="ui Thread-Variation
Minimal-Variation Size-Variation comments">
<div class="comment">
...
</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 threading comment variation.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Comment Variations</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet"
/>
<script src=
"https://code.jquery.com/jquery-3.1.1.min.js" integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body>
<div class="ui container">
<h2 class="ui green header">GeeksforGeeks</h2>
<h4>Semantic UI Comment Variations</h4>
<hr><br/>
<div class="ui threaded 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 class="ui comments">
<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 class="comment">
<a class="avatar">
<img src=
"https://media.geeksforgeeks.org/img-practice/user_web-1598433228.svg">
</a>
<div class="content">
<a class="author">Srinivas</a>
<div class="text">
Yeah so true, you know nothing about us.
</div>
<div class="actions">
<a class="reply">Reply</a>
</div>
</div>
</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">Mr. Anonymous</a>
<div class="text">
Keep Dreaming.
</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 a minimal comment variation.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Comment Variations</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body>
<div class="ui container">
<h2 class="ui green header">GeeksforGeeks</h2>
<h4>Semantic UI Comment Variations</h4>
<hr><br/>
<div class="ui threaded minimal 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 class="ui comments">
<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 class="comment">
<a class="avatar">
<img src=
"https://media.geeksforgeeks.org/img-practice/user_web-1598433228.svg">
</a>
<div class="content">
<a class="author">Srinivas</a>
<div class="text">
Yeah so true, you know nothing about us.
</div>
<div class="actions">
<a class="reply">Reply</a>
</div>
</div>
</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">Mr. Anonymous</a>
<div class="text">
Keep Dreaming.
</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 illustrated size comment variation.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Comment Variations</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet"/>
<script src=
"https://code.jquery.com/jquery-3.1.1.min.js" integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body>
<div class="ui container">
<h2 class="ui green header">GeeksforGeeks</h2>
<h4>Semantic UI Comment Variations</h4>
<hr><br/>
<div class="ui mini comments">
<h2 class="ui dividing header">Mini 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 class="ui tiny comments">
<h2 class="ui dividing header">Tiny 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 class="ui small comments">
<h2 class="ui dividing header">Small 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 class="ui comments">
<h2 class="ui dividing header">Standard 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 class="ui large comments">
<h2 class="ui dividing header">Large 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 class="ui big comments">
<h2 class="ui dividing header">Big 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 class="ui massive comments">
<h2 class="ui dividing header">Massive 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:
References: https://semantic-ui.com/views/comment.html