Open In App

Semantic-UI Comment Variations

Improve
Improve
Like Article
Like
Save
Share
Report

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.

HTML




<!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:

Semantic UI Comment threaded Variations

Example 2: In the below example, we have created a minimal comment variation.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI Comment Variations</title>
  
    <link href=
    rel="stylesheet"/>
  
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" 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 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:

Semantic UI Comment minimal Variations

Example 3: In the below example, we have illustrated size comment variation.

HTML




<!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:

Semantic UI Comment size Variations

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



Last Updated : 24 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads