Semantic-UI Label Types
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
Please Login to comment...