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...