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 =
rel = "stylesheet"
/>
< script src =
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin = "anonymous" >
</ script >
< script src =
</ 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 =
</ 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 =
</ 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 =
</ 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 =
</ 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 =
rel = "stylesheet" />
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin = "anonymous" >
</ script >
< script src =
</ 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 =
</ 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 =
</ 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 =
</ 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 =
</ 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 =
rel = "stylesheet" />
< script src =
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin = "anonymous" >
</ script >
< script src =
</ 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 =
</ 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 =
</ 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 =
</ 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 =
</ 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 =
</ 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 =
</ 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 =
</ 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 =
</ 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 =
</ 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 =
</ 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 =
</ 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 =
</ 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 =
</ 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 =
</ 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