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