Skip to content
Related Articles

Related Articles

Semantic-UI Comment Content

Improve Article
Save Article
  • Last Updated : 22 Apr, 2022
Improve Article
Save Article

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

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

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

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

Semantic-UI Comment Content

Reference: https://semantic-ui.com/views/comment.html


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!