Semantic-UI Label Circular Variations
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 Circular Variations of the Semantic UI framework. The Semantic-UI Label Circular Variation is used to add a circular label to the element.
Semantic-UI Label Circular Variations Class:
- circular: This class is used to create the circular label.
Syntax:
<a class="ui red circular label"> Content... </a>
Example 1: This example describes the uses of Semantic-UI Label Circular Variations.
HTML
<!DOCTYPE html> < html > < head > < title > Semantic-UI Label Circular Variations </ title > < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </ head > < body > < div class = "ui container center aligned" > < h2 style = "color:green" > w3wiki </ h2 > < h3 >Semantic-UI Label Circular Variations</ h3 > < a class = "ui red circular mini label" ></ a > < a class = "ui orange circular tiny label" ></ a > < a class = "ui yellow circular small label" ></ a > < a class = "ui olive circular label" ></ a > < a class = "ui green circular medium label" ></ a > < a class = "ui teal circular large label" ></ a > < a class = "ui blue circular big label" ></ a > < a class = "ui violet circular large label" ></ a > < a class = "ui purple circular medium label" ></ a > < a class = "ui pink circular label" ></ a > < a class = "ui brown circular small label" ></ a > < a class = "ui grey circular tiny label" ></ a > < a class = "ui black circular mini label" ></ a > </ div > </ body > </ html > |
Output:
Example 2: This example describes the uses of Semantic-UI Label Circular Variations with label content.
HTML
<!DOCTYPE html> < html > < head > < title > Semantic-UI Label Circular Variations </ title > < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </ head > < body > < div class = "ui container center aligned" > < h2 style = "color:green" > w3wiki </ h2 > < h3 >Semantic-UI Label Circular Variations</ h3 > < a class = "ui red circular label" >G</ a > < a class = "ui orange circular label" >e</ a > < a class = "ui yellow circular label" >e</ a > < a class = "ui olive circular label" >k</ a > < a class = "ui green circular label" >s</ a > < a class = "ui teal circular label" >f</ a > < a class = "ui blue circular label" >o</ a > < a class = "ui violet circular label" >r</ a > < a class = "ui purple circular label" >G</ a > < a class = "ui pink circular label" >e</ a > < a class = "ui brown circular label" >e</ a > < a class = "ui grey circular label" >k</ a > < a class = "ui black circular label" >s</ a > </ div > </ body > </ html > |
Output:
Reference: https://semantic-ui.com/elements/label.html#circular