Open In App

Semantic-UI Label Groups

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. 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 content information to the user. Now, these labels can be created in various ways and can have different looks and feel like a colored label, a label in form of a tag, a circular label, etc. These can be achieved with the help of label groups.

Semantic UI Label Groups: There are four types of Label Groups in the Semantic UI.

  • Group Size: Multiple Labels can have the same sizes together.
  • Colored Group: Multiple Labels can have the same colors together.
  • Tag Group: Multiple Labels can contain a tag format.
  • Circular Group: Multiple Labels can have a circular shape.

Syntax: 

<div class="ui Label-groups labels">
    <a class="ui label">
       ....
    </a>
    ....
</div>

Note: The syntax for the other label groups is the same and the only difference is the name of the label group that has to be replaced accordingly. In the case of colored group and group size, we have to write the name of the color or specify the size respectively in place of the name of the label group.

Example 1: In the following program, we will be using the Group Size and Colored Group Label Groups. The developer can use different sizes like mini, tiny, huge, massive, and different colors as per the application’s need.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Semantic-UI Label Groups</title>
    <link rel="stylesheet"
          href=
    <style>
      body
      {
       margin-left:10px;
       margin-right:10px;
      }
    </style>   
</head>
<body>
  <div class="ui green huge header">GeeksforGeeks</div>
  <div class="ui large header">Semantic UI Label Groups</div>
  <div class="ui large header">Group Size</div>
      <div class="ui huge labels"> <!--Group Size-->
            <div class="ui label">
              Sachin
            </div>
            <div class="ui label">
              Sehwag
            </div>
            <div class="ui label">
              Gambhir
            </div>
            <div class="ui label">
              Dhoni
            </div>       
      </div>
 
      <div class="ui large header">Colored Groups</div>
 
      <div class="ui red labels"> <!--Colored Group-->
        <div class="ui label">
          Mo Salah
        </div>
        <div class="ui label">
          Sadio Mane
        </div>
        <div class="ui label">
          Gerrard
        </div>
        <div class="ui label">
         Allison
        </div>
      </div>
</body>
</html>


Output:

Semantic-UI Label Groups

Semantic-UI Label Groups

Example 2: In the following program, we will be using the tag group and circular group label groups.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Semantic-UI Label Groups</title>
    <link rel="stylesheet"
          href=
    <style>
       body
       {
        margin-left:10px;
        margin-right:10px;
       }
    </style>
</head>
 
<body>
    <div class="ui green huge header">GeeksforGeeks</div>
    <div class="ui large header">Semantic UI Label Groups</div>
    <div class="ui large header">Tag Group</div>
    <div class="ui tag labels"> <!--Tag Group -->
      <div class="ui label">
        Rs. 5
      </div>
      <div class="ui label">
        Rs. 500
      </div>
      <div class="ui label">
        Rs. 10000
      </div>
      <div class="ui label">
        Rs. 50000
      </div>
    </div>
    <div class="ui large header">Circular Group</div>
    <!--Circular Group-->
    <div class="ui circular labels">
 
      <div class="ui label">
        Superman
      </div>
      <div class="ui label">
        Batman
      </div>
      <div class="ui label">
        Iron Man
      </div>
      <div class="ui label">
       Hulk
      </div>
    </div>
</body>
</html>


Output:

Semantic-UI Label Groups

Semantic-UI Label Groups

Reference: https://semantic-ui.com/elements/label.html



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