Semantic-UI Label Types
Last Updated :
01 Mar, 2022
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
Share your thoughts in the comments
Please Login to comment...