Open In App

Semantic-UI Label Tag Group

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. This framework allows us to use various of its styles and properties to make a website more user-friendly. 

A Semantic UI label is used to create meaningful content classifications. In the Semantic UI label, 4 types of groups are offered. These are Group Size, Coloured Group, Tag Group, Circular Group.

Semantic UI Label Tag Group is the group of labels that can share tag formatting. We have to include the tag class on the outer div when we add the labels in it, they will automatically share tag formatting.

Semantic UI Label Tag Group Class:

  • tag: This class is used to make the tag label.

Syntax:

<div class="ui tag labels">
    <a class="ui label">
        ....
    </a>
    ....
</div>

Example 1:The following code demonstrates the label tag group using the UI tag labels class.

HTML




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


Output:

Semantic-UI Label Tag Group

Semantic-UI Label Tag Group

Example 2: To change the color of the tag, we have to add the color in the class.

HTML




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


Output:

Semantic-UI Label Tag Group

Semantic-UI Label Tag Group

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



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