Semantic-UI | Label
Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is same as a bootstrap for use and has great different elements to use to make your website look more amazing. It uses a class to add CSS to the elements.
A label can be really useful to make your website more user-friendly.
Example 1: This example create a simple label content.
<!DOCTYPE html> < html > < head > < title >Semantic UI</ title > < link href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel = "stylesheet" /> < script src = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" > </ script > </ head > < body > < div class = "ui container" > < h2 >Label</ h2 > < div class = "ui label" > < i class = "users icon" ></ i > 100 </ div > </ div > </ body > </ html > |
Output:
You can use any icon for example mail or any icon, you can check icons on the semantic-UI site.
Example 2: This example create a label for your form element.
<!DOCTYPE html> < html > < head > < title >Semantic UI</ title > < link href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel = "stylesheet" /> < script src = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" > </ script > </ head > < body > < div class = "ui container" > < h2 >Log In</ h2 > < div class = "ui form" > < div class = "four wide field" > < input type = "text" placeholder = "Username" > < div class = "ui pointing label" > Enter Username </ div > </ div > < div class = "four wide field" > < input type = "password" placeholder = "Password" > < div class = "ui pointing label" > Enter Password </ div > </ div > < div class = "field" > < input class = "ui primary button" type = "submit" value = "Log In" > </ div > </ div > </ div > </ body > </ html > |
Output:
Example 3: This example create a Floating Label.
<!DOCTYPE html> < html > < head > < title >Semantic UI</ title > < link href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel = "stylesheet" /> < script src = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" > </ script > </ head > < body > < div class = "ui container" > < h2 >Floating Label</ h2 > < div class = "ui compact menu" > < a class = "item" > < i class = "icon users" ></ i > Request < div class = "floating ui red label" >10</ div > </ a > < a class = "item" > < i class = "icon mail" ></ i > Messages < div class = "floating ui red label" >100</ div > </ a > < a class = "item" > < i class = "icon globe" ></ i > Notification < div class = "floating ui teal label" >22</ div > </ a > </ div > </ div > </ body > </ html > |
Output: