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 = "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" >w3wiki</ 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.w3wiki.net/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.w3wiki.net/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.
HTML
<!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" >w3wiki</ 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.w3wiki.net/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.w3wiki.net/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.
HTML
<!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" >w3wiki</ 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.w3wiki.net/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.w3wiki.net/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.
HTML
<!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" >w3wiki</ 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.w3wiki.net/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.w3wiki.net/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