Semantic-UI Label Detail Content
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, 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 =
< script src =
</ script >
</ head >
< body >
< h1 class = "ui header green" >
GeeksforGeeks
</ h1 >
< strong >
Semantic UI Label Detail Content
</ strong >
< br />
< a class = "ui label" >
Site:
< div class = "detail" >GeeksforGeeks</ div >
</ a >
</ body >
</ html >
|
Output:
Semantic-UI Label Detail Content
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 =
< script src =
</ script >
</ head >
< body >
< h1 class = "ui header green" >
GeeksforGeeks
</ h1 >
< strong >
Semantic UI Label Detail Content
</ strong >
< br />
< a class = "ui green label" >
Site:
< div class = "detail" >GeeksforGeeks</ div >
</ a >
</ body >
</ html >
|
Output:
Semantic-UI Label Detail Content
Reference: https://semantic-ui.com/elements/label.html#detail
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...