Semantic-UI Label Size Variations
Last Updated :
28 Feb, 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 Size Variations of the Semantic UI framework. The Semantic-UI Label Size Variations are used to add different sizes of the label elements.
Semantic-UI Label Size Variations Classes:
- mini: This class is used to display the label of mini size.
- tiny: This class is used to display the label of tiny size.
- small: This class is used to display the label of small size.
- medium: This class is used to display the label of medium size.
- large: This class is used to display the label of large size.
- big: This class is used to display the label of big size.
- huge: This class is used to display the label of huge size.
- massive: This class is used to display the label of massive size.
Syntax:
<div class="ui mini label">
Mini
</div>
Example 1: This example describes the uses of Semantic-UI Label Size Variations.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
Semantic-UI Label Size Variations
</ title >
< link rel = "stylesheet" href =
</ head >
< body >
< div class = "ui container center aligned" >
< h2 style = "color:green" >
GeeksforGeeks
</ h2 >
< h3 >Semantic-UI Label Size Variations</ h3 >
< a class = "ui mini label" >G</ a >
< a class = "ui tiny label" >e</ a >
< a class = "ui small label" >e</ a >
< a class = "ui label" >g</ a >
< a class = "ui medium label" >s</ a >
< a class = "ui large label" >f</ a >
< a class = "ui big label" >o</ a >
< a class = "ui huge label" >r</ a >
< a class = "ui massive label" >G</ a >
< a class = "ui huge label" >e</ a >
< a class = "ui big label" >e</ a >
< a class = "ui large label" >k</ a >
< a class = "ui medium label" >s</ a >
</ div >
</ body >
</ html >
|
Output:
Example 2: This example describes the uses of Semantic-UI Label Size Variations.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
Semantic-UI Label Size Variations
</ title >
< link rel = "stylesheet" href =
</ head >
< body >
< div class = "ui container center aligned" >
< h2 style = "color:green" >
GeeksforGeeks
</ h2 >
< h3 >Semantic-UI Label Size Variations</ h3 >
< a class = "ui yellow mini label" >G</ a >
< a class = "ui olive tiny label" >e</ a >
< a class = "ui green small label" >e</ a >
< a class = "ui teal label" >g</ a >
< a class = "ui blue medium label" >s</ a >
< a class = "ui violet large label" >f</ a >
< a class = "ui purple big label" >o</ a >
< a class = "ui pink huge label" >r</ a >
< a class = "ui brown massive label" >G</ a >
< a class = "ui grey huge label" >e</ a >
< a class = "ui black big label" >e</ a >
< a class = "ui olive large label" >k</ a >
< a class = "ui yellow medium label" >s</ a >
</ div >
</ body >
</ html >
|
Output:
Reference: https://semantic-ui.com/elements/label.html#size
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...