Semantic-UI Comment Size Variation

Last Updated : 16 Feb, 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 is equipped with pre-built semantic components that help create responsive layouts using user-friendly HTML, and it uses predefined CSS and jQuery to incorporate different frameworks.

A comment displays feedback of the user to its site content, and there are three types of variations namely threaded, minimal, and size variants. In this article, we are going to learn about comment size variation.

Semantic UI Comment size variation class:

large: It is the class used to set the comment size to large.
small: It is the class used to set the comment size to small.

Syntax:

<div class="ui small comments">

Where small is the size of the comment if you want a large comment then just replace ‘small’ with ‘large’. When you observe both the below output you can notice that comments are smaller in the first output as compared to the other one.

Example 1: The below example illustrates the Semantic UI comment size variation. The following uses the comment small class.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" /> 
</head> 
  
<body> 
    <center> 
      <h1 class="ui header green">GeeksforGeeks</h1> 
      <strong> Semantic UI Comment Size Variation </strong> 
      <h3 class="ui dividing header">Comments</h3> 
    </center> 
    <div class="ui small comments"> 
    
        <div class="comment"> 
          <a class="avatar"> 
             <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220210074537/color3-200x112.png"> 
          </a> 
         <div class="content"> 
           <a class="author">Avantika </a> 
           <div class="metadata"> 
              <span class="date">Today at 5:42PM</span> 
           </div> 
          <div class="text"> 
            This platform is outstanding for learning DSA. 
          </div> 
          <div class="actions"> 
            <a class="reply">Reply</a> 
          </div> 
         </div> 
     </div> 
  <!-- Second user's comment -->
     <div class="comment"> 
        <a class="avatar"> 
          <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220210074518/color11-300x169.png"> 
        </a> 
        <div class="content"> 
          <a class="author">Rahul</a> 
          <div class="metadata"> 
            <span class="date">Yesterday at 12:30AM</span> 
          </div> 
          <div class="text"> 
            <p> 
              This platform helped me learn  
              competitive programming. 
            </p> 
          </div> 
          <div class="actions"> 
            <a class="reply">Reply</a> 
          </div> 
        </div> 
      
        <!-- Reply to second user's comment -->
        <div class="comments"> 
          <div class="comment"> 
            <a class="avatar"> 
              <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220129092238/images.png"> 
            </a> 
            <div class="content"> 
              <a class="author">GeeksForGeeks</a> 
              <div class="metadata"> 
                <span class="date">Just now</span> 
              </div> 
              <div class="text"> 
                Thank you so much Rahul. 
              </div> 
              <div class="actions"> 
                <a class="reply">Reply</a> 
              </div> 
            </div> 
          </div> 
        </div> 
      </div> 
      <!-- third user's comment -->
      <div class="comment"> 
        <a class="avatar"> 
          <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220210074530/color2-300x166.jfif"> 
        </a> 
        <div class="content"> 
          <a class="author">Charan</a> 
          <div class="metadata"> 
            <span class="date">5 days ago</span> 
          </div> 
          <div class="text"> 
            Dude, this is awesome. Thanks so much 
          </div> 
          <div class="actions"> 
            <a class="reply">Reply</a> 
          </div> 
        </div> 
       </div> 
      <form class="ui reply form"> 
        <div class="field"> 
          <textarea></textarea> 
        </div> 
        <div class="ui blue labeled submit icon button"> 
          <i class="icon edit"></i> Add Reply 
        </div> 
      </form> 
    </div> 
</body> 
</html> 

Output:

Example 2: The below example illustrates the Semantic UI comment size variation for the large class.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" /> 
</head> 
  
<body> 
    <center> 
      <h1 class="ui header green">GeeksforGeeks</h1> 
      <strong> Semantic UI Comment Size Variation </strong> 
      <h3 class="ui dividing header">Comments</h3> 
    </center> 
    <div class="ui large comments"> 
        <div class="comment"> 
          <a class="avatar"> 
             <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220210074537/color3-200x112.png"> 
          </a> 
         <div class="content"> 
           <a class="author">Avantika </a> 
           <div class="metadata"> 
              <span class="date">Today at 5:42PM</span> 
           </div> 
          <div class="text"> 
            This platform is outstanding for learning DSA. 
          </div> 
          <div class="actions"> 
            <a class="reply">Reply</a> 
          </div> 
         </div> 
     </div> 
  <!-- Second user's comment -->
     <div class="comment"> 
        <a class="avatar"> 
          <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220210074518/color11-300x169.png"> 
        </a> 
        <div class="content"> 
          <a class="author">Rahul</a> 
          <div class="metadata"> 
            <span class="date">Yesterday at 12:30AM</span> 
          </div> 
          <div class="text"> 
            <p> 
              This platform helped me learn  
              competitive programming. 
            </p> 
          </div> 
          <div class="actions"> 
            <a class="reply">Reply</a> 
          </div> 
        </div> 
      
        <!-- Reply to second user's comment -->
        <div class="comments"> 
          <div class="comment"> 
            <a class="avatar"> 
              <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220129092238/images.png"> 
            </a> 
            <div class="content"> 
              <a class="author">GeeksForGeeks</a> 
              <div class="metadata"> 
                <span class="date">Just now</span> 
              </div> 
              <div class="text"> 
                Thank you so much Rahul. 
              </div> 
              <div class="actions"> 
                <a class="reply">Reply</a> 
              </div> 
            </div> 
          </div> 
        </div> 
      </div> 
      <!-- third user's comment -->
      <div class="comment"> 
        <a class="avatar"> 
          <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220210074530/color2-300x166.jfif"> 
        </a> 
        <div class="content"> 
          <a class="author">Charan</a> 
          <div class="metadata"> 
            <span class="date">5 days ago</span> 
          </div> 
          <div class="text"> 
            Dude, this is awesome. Thanks so much 
          </div> 
          <div class="actions"> 
            <a class="reply">Reply</a> 
          </div> 
        </div> 
       </div> 
      <form class="ui reply form"> 
        <div class="field"> 
          <textarea></textarea> 
        </div> 
        <div class="ui blue labeled submit icon button"> 
          <i class="icon edit"></i> Add Reply 
        </div> 
      </form> 
    </div> 
</body> 
</html> 