Skip to content
Related Articles

Related Articles

Semantic-UI Label Colored Group

Improve Article
Save Article
  • Last Updated : 28 Feb, 2022
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 use to make your website look more amazing.

Semantic UI provides a variety of labels that can share colours together, this class allow the user to add shared colour to a group of labels. To add a colour to a label we need to include the name of the colour within the class.

Semantic UI Label Coloured Group Class:

  • red: This class is used to set the red colour to the label.
  • orange: This class is used to set the orange colour to the label.
  • yellow: This class is used to set the yellow colour to the label.
  • olive: This class is used to set the olive colour to the label.
  • green: This class is used to set the green colour to the label.
  • teal: This class is used to set the teal colour to the label.
  • blue: This class is used to set the blue colour to the label.
  • violet: This class is used to set the violet colour to the label.
  • purple: This class is used to set the purple colour to the label.
  • pink: This class is used to set the pink colour to the label.
  • brown: This class is used to set the brown colour to the label.
  • grey: This class is used to set the grey colour to the label.
  • black: This class is used to set the black colour to the label.

Syntax:

<div class="ui Coloured-Group-Class labels">
  <a class="ui label">...</a>
  <a class="ui label">...</a>
  ...
  ...
</div>

Example 1: The following code demonstrates using labels class with any colour to it.

HTML




<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Semantic-UI Label Colored Group</title>
    <link rel="stylesheet" 
          href=
    />
  </head>
      <style>
         body
         {
             margin-left:10px;
             margin-right:10px;
         }
     </style>
  <body>
      <br/>
          <h1 class="ui header green">GeeksforGeeks</h1>
          <strong>Semantic UI Label Colored Group</strong>
          <br/><br/>
          <div class="ui olive labels">
              <a class="ui label">Label 1</a>
              <br/>
              <a class="ui label">Label 2</a>
          </div>
  </body>
</html>


Output:

Semantic-UI Label Colored Group

Semantic-UI Label Colored Group

Example 2: To change the colour of the label, we have to add the colour in the class.

HTML




<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Semantic-UI Label Colored Group</title>
    <link rel="stylesheet" 
          href=
    />
  </head>
   <style>
      body
      {
        margin-left:10px;
        margin-right:10px;
      }
   </style>
  <body>
      <br/>
          <h1 class="ui header green">GeeksforGeeks</h1>
           <strong>Semantic UI Label Colored Group</strong>
           <br/><br/>
          <div class="ui green labels">
              <a class="ui label">Group 1 Label 1</a>
              <br/>
              <a class="ui label">Group 1 Label 2</a>
         </div>
         <div class="ui yellow labels">
             <a class="ui label">Group 2 Label 1</a>
             <br/>
             <a class="ui label">Group 2 Label 2</a>
         </div>
  </body>
</html>


Output:

Semantic-UI Label Colored Group

Semantic-UI Label Colored Group

Reference link: https://semantic-ui.com/elements/label.html#colored-group


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!