Semantic-UI Label Detail Content
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, labels give descriptions to pieces of content. In the Semantic UI label, 4 types of Content are offered. These are Detail, Icon, Image and Link types. The Semantic-UI Label Detail Content is used to show the details with the label.
Semantic-UI Label Detail Content Class:
- detail: This class is used to make the detail label.
Syntax:
<a class="ui label"> ... <div class="detail"> ... </div> </a>
Example 1: In this example, we will add a Label Detail Content using Semantic UI.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < title >Semantic-UI Label Detail Content</ title > < 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 > </ head > < body > < h1 class = "ui header green" > w3wiki </ h1 > < strong > Semantic UI Label Detail Content </ strong > < br /> < a class = "ui label" > Site: < div class = "detail" >w3wiki</ div > </ a > </ body > </ html > |
Output:
Example 2: In this example, we will add a Label Detail Content using Semantic UI with color.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < title >Semantic-UI Label Detail Content</ title > < 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 > </ head > < body > < h1 class = "ui header green" > w3wiki </ h1 > < strong > Semantic UI Label Detail Content </ strong > < br /> < a class = "ui green label" > Site: < div class = "detail" >w3wiki</ div > </ a > </ body > </ html > |
Output:
Reference: https://semantic-ui.com/elements/label.html#detail
Contact Us