Skip to content
Related Articles

Related Articles

Semantic-UI Label Variations

View Discussion
Improve Article
Save Article
  • Difficulty Level : Medium
  • Last Updated : 10 Mar, 2022
View Discussion
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 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. This can be achieved with the help of Label Variations.

Semantic UI Label Variations: There are four types of label variations in the Semantic UI.

  • Circular: This class is used to set the label is in a circular form.
  • Basic: This class is used to set the label is in a basic form.
  • Colored: This class is used to set different colors.
  • Size: This class is used to set labels with various sizes.

Syntax:

<div class="ui Label-Variations label">
   ....
</div>

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

Example 1: In the following program, we will be using the circular and basic label variations.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Semantic-UI Label Variations</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 medium header">
    Semantic UI Label variations
  </div>
  <div class="ui small header"> Circular labels</div
    <!--Circular Label-->
    <div class="ui blue circular label"
      1
    </div>
    <div class="ui blue circular label">
      2
    </div>
    <div class="ui blue circular label">
      3
    </div>
    <div class="ui blue circular label">
      4
    </div>
    <div class="ui small header">Basic labels</div
    <!--Basic Label-->
    <div class="ui basic label"
      GFG
    </div>
    <div class="ui basic label">
      Geeks
    </div>
    <div class="ui basic label">
      GeeksforGeeks
    </div>
    <div class="ui basic label">
      Geek1
    </div>
</body>
</html>


Output:

Semantic-UI Label Variations

Semantic-UI Label Variations

Example 2: In the following program, we will be using the colored and size label variations.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Semantic-UI Label Variations</title>
    <link rel="stylesheet" 
          href=
    <style>
       body{
         margin-left:10px;
         margin-right:10px;
       }
    </style>  
</head>
  
<body>
  <br>
  <div class="ui green huge header">
    GeeksforGeeks
  </div>
  <div class="ui medium header">
    Semantic UI Label Variations
  </div>
    
  <div class="ui small header">Colored label</div
     <!-- Colored Label-->
    <div class="ui blue label"
      Blue
    </div>
    <div class="ui yellow label">
      Yellow
    </div>
    <div class="ui green label">
      Green
    </div>
    <div class="ui red label">
      Red
    </div>
    <div class="ui small header">Size label</div
    <!--Size Label-->
    <div class="ui large label"
      Large Size
    </div>
    <div class="ui medium label">
      Medium Size
    </div>
    <div class="ui small label">
      Small Size
    </div>
    <div class="ui huge label">
     Huge Size
    </div>
</body>
</html>


Output:

Semantic-UI Label Variations

Semantic-UI Label Variations

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!