Semantic-UI Label Horizontal Type
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. This framework allows us to use various of its styles and properties to make a website more user-friendly.
In this article, we will create a Label Horizontal Type using the Semantic UI framework. A Semantic UI label is used to create meaningful content classifications. In the Semantic UI label, 9 types of labels are offered. These are Label, Image, Pointing, Corner, Tag, Ribbon, Attached, Horizontal and Floating.
Semantic UI Label Horizontal Type is used to format the label content along-size it horizontally.
Semantic-UI Label Horizontal Type Class:
- horizontal: This class is used to make the label in horizontal format.
Syntax:
<a class="item"> <div class="ui horizontal label"> ... </div> ... </a>
Example 1: The below example illustrates the Semantic UI Label Horizontal Type Icon using label and horizontal class.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> < script src = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" > </ script > < title >Semantic-UI Label Horizontal Type</ title > </ head > < body > < div class = "ui container center aligned" > < h2 style = "color:green" > w3wiki </ h2 > < h3 >Semantic-UI Label Horizontal Type</ h3 > < a class = "item" > < div class = "ui green horizontal label" > Site </ div > w3wiki </ a > </ div > </ body > </ html > |
Output:
Example 2: In this example, we will create some horizontal labels in form of the list items using Semantic-UI.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> < script src = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" > </ script > < title >Semantic-UI Label Horizontal Type</ title > </ head > < body > < div class = "ui container center aligned" > < h2 style = "color:green" > w3wiki </ h2 > < h3 >Semantic-UI Label Horizontal Type</ h3 > < div class = "ui selection list" > < a class = "item" > < div class = "ui green horizontal label" >Site</ div > w3wiki </ a > < a class = "item" > < div class = "ui yellow horizontal label" >Topic</ div > Semantic UI </ a > < a class = "item" > < div class = "ui blue horizontal label" >Label</ div > Horizontal </ a > </ div > </ div > </ body > </ html > |
Output:
Reference: https://semantic-ui.com/elements/label.html#horizontal