Semantic-UI Comment Types
Last Updated :
21 Mar, 2022
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 types.
Semantic UI Comment Types:
- Semantic UI Comments: Semantic UI Comments create a standard list of comments, which can be styled and modified using various classes provided by Semantic UI.
Syntax:
<div class="ui 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 standard Semantic UI Comments.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Semantic UI Comment Types</ title >
< link href =
rel = "stylesheet" />
integrity =
"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 Types</ h4 >
< hr >
< br />
< div class = "ui 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 >
< 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:
Standard Comment Flow
Example 2: In the below example, we have standard Semantic UI comments with a reply form.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Semantic UI Comment Types</ title >
< link href =
rel = "stylesheet" />
integrity =
"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 Types</ h4 >
< hr >
< br />
< div class = "ui 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 >
< 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 >
< 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:
Standard Comment flow with a reply form
Reference: https://semantic-ui.com/views/comment.html
Share your thoughts in the comments
Please Login to comment...