Semantic-UI Comment Content
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.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Semantic UI Comment Content</ title >
< link href =
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 =
</ 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:
Semantic-UI Comment Content
Example 2: In the below example, we have created comments with metadata.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Semantic UI Comment Content</ title >
< link href =
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 =
</ 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 =
</ 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:
Semantic-UI Comment Content
Example 3: In the below example, we have created comments with actions.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Semantic UI Comment Content</ title >
< link href =
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 =
</ 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 =
</ 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:
Semantic-UI Comment Content
Example 4: In the below example, we have created comments with a reply form.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Semantic UI Comment Content</ title >
< link href =
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 =
</ 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 =
</ 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:
Semantic-UI Comment Content
Reference: https://semantic-ui.com/views/comment.html
Last Updated :
22 Apr, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...