Semantic-UI Label Group Size

Last Updated : 09 Mar, 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. The best part about this framework is that it creates beautiful and responsive layouts as it contains pre-built semantic components.

A label is an important component of our website as it displays information to the user. Now, these labels can be created in various ways and can have different looks and feel. A Label Group Size is a group of labels that can have the same sizes together.

Semantic UI Label Group Size Classes:

mini: This class is used to display the label group of mini size.
tiny: This class is used to display the label group of tiny size.
small: This class is used to display the label group of small size.
large: This class is used to display the label group of large size.
big: This class is used to display the label group of big size.
huge: This class is used to display the label group of huge size.
massive: This class is used to display the label group of massive size.

Syntax:

<div class="ui group_size labels">

The below examples will demonstrate the Label Group Size Classes in Semantic UI.

Example 1: This example shows the Label Group using the Big size.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
</head> 
  
<body> 
    <br> 
    <div class="ui green huge header"> 
      GeeksforGeeks 
    </div> 
    <div class="ui large header"> 
      Label Group Size 
    </div> 
    <br> 
    <div class="ui big labels"> 
        <!--Label Group Size-->
  
        <div class="ui blue label"> 
            GFG 
        </div> 
        <div class="ui blue label"> 
            Geek 
        </div> 
        <div class="ui blue label"> 
            GeeksforGeeks 
        </div> 
        <div class="ui blue label"> 
            GeeksForLife 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Example 2: This example shows the Label Group using all the available sizes.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
</head> 
  
<body> 
    <br> 
    <div class="ui green huge header"> 
      GeeksforGeeks 
    </div> 
    <div class="ui large header"> 
      Label Group Size 
    </div> 
    <br> 
  
    <div class="ui mini labels"> 
        <!--Label Group Size Mini-->
  
        <div class="ui red label"> 
            Mini 
        </div> 
        <div class="ui red label"> 
            Mini 
        </div> 
        <div class="ui red label"> 
            Mini 
        </div> 
    </div> 
    <br> 
  
    <div class="ui tiny labels"> 
        <!--Label Group Size Tiny-->
  
        <div class="ui purple label"> 
            Tiny 
        </div> 
        <div class="ui purple label"> 
            Tiny 
        </div> 
        <div class="ui purple label"> 
            Tiny 
        </div> 
    </div> 
    <br> 
  
    <div class="ui small labels"> 
        <!--Label Group Size Small-->
  
        <div class="ui black label"> 
            Small 
        </div> 
        <div class="ui black label"> 
            Small 
        </div> 
        <div class="ui black label"> 
            Small 
        </div> 
    </div> 
    <br> 
  
    <div class="ui large labels"> 
        <!--Label Group Size Large-->
  
        <div class="ui yellow label"> 
            Large 
        </div> 
        <div class="ui yellow label"> 
            Large 
        </div> 
        <div class="ui yellow label"> 
            Large 
        </div> 
    </div> 
    <br> 
  
    <div class="ui big labels"> 
        <!--Label Group Size Big-->
  
        <div class="ui orange label"> 
            Big 
        </div> 
        <div class="ui orange label"> 
            Big 
        </div> 
        <div class="ui orange label"> 
            Big 
        </div> 
    </div> 
    <br> 
  
    <div class="ui huge labels"> 
        <!--Label Group Size Huge-->
  
        <div class="ui blue label"> 
            Huge 
        </div> 
        <div class="ui blue label"> 
            Huge 
        </div> 
        <div class="ui blue label"> 
            Huge 
        </div> 
    </div> 
    <br> 
  
    <div class="ui massive labels"> 
        <!--Label Group Size Massive-->
  
        <div class="ui green label"> 
            Massive 
        </div> 
        <div class="ui green label"> 
            Massive 
        </div> 
        <div class="ui green label"> 
            Massive 
        </div> 
    </div> 
</body> 
  
</html>