Open In App

Semantic-UI Label Types

Improve
Improve
Like Article
Like
Save
Share
Report

Semantic UI is a framework that is used to build a great user interface. It is an open-source framework that uses CSS and jQuery. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing.

A Semantic UI label is used to create meaningful content classifications. In this article, we will learn to use the Semantic-UI Label Type of the Semantic UI framework. The Semantic-UI Label Type is used to add label to the element.

Semantic-UI Label Type Class:

  • label: This class is used to add label to the element.

Syntax:

<div class="ui label">
  <i class="icon-name icon"></i> Content...
</div>

Example 1: This example describe the uses of Semantic-UI Label Type.

HTML




<!DOCTYPE html>
<html>
   <head>
      <title>
         Semantic-UI Label Types
      </title>
      <link rel="stylesheet" href=
   </head>
   <body>
      <div class="ui container">
         <h2 style="color:green">
            GeeksforGeeks
         </h2>
         <h3>Semantic-UI Label Types</h3>
         <div class="ui label">
            <i class="desktop icon"></i> Desktop
         </div>
         <div class="ui label">
            <i class="download icon"></i> Download
         </div>
         <div class="ui label">
            <i class="headphones icon"></i> Headphones
         </div>
         <div class="ui label">
            <i class="keyboard icon"></i> Keyboard
         </div>
      </div>
   </body>
</html>


Output:

Example 2: This example describe the uses of Semantic-UI Label Type with color variations.

HTML




<!DOCTYPE html>
<html>
   <head>
      <title>
         Semantic-UI Label Types
      </title>
      <link rel="stylesheet" href=
   </head>
   <body>
      <div class="ui container">
         <h2 style="color:green">
            GeeksforGeeks
         </h2>
         <h3>Semantic-UI Label Types</h3>
         <div class="ui green label">
            <i class="desktop icon"></i> Desktop
         </div>
         <div class="ui olive label">
            <i class="download icon"></i> Download
         </div>
         <div class="ui brown label">
            <i class="headphones icon"></i> Headphones
         </div>
         <div class="ui teal label">
            <i class="keyboard icon"></i> Keyboard
         </div>
      </div>
   </body>
</html>


Output:

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



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