Semantic-UI Label Basic Variations
Last Updated :
01 Mar, 2022
Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. This framework allows us to use various of its styles and properties to make a website more user-friendly.
In the Semantic UI label, 4 types of Variations are offered. These are Basic, Circular, Coloured, Size. With this basic label, we can create several labels including images, details, pointing labels, etc. a basic label can reduce its complexity.
Semantic-UI Label Basic Variations Class:
- basic: This class is used to create a basic label on the element.
Syntax:
<a class="ui basic label ...">
...
</a>
Example 1: In this example, we will create a Basic label and pointing label using Semantic-UI.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
<script src=
</script>
</head>
<body>
<h1 class="ui header green">GeeksforGeeks</h1>
<strong> Semantic UI Label Basic Variations </strong>
<br />
Basic:
<a class="ui basic label">GeeksforGeeks</a><br />
Pointing:
<a class="ui pointing basic green label">GeeksforGeeks</a>
</body>
</html>
|
Output:
Example 2: In this example, we will create a Basic Image label using the Semantic UI label.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
<script src=
</script>
</head>
<body>
<h1 class="ui header green">GeeksforGeeks</h1>
<strong> Semantic UI Label Basic Variations </strong>
<br />
<a class="ui basic green image label">
<img src=
GeeksforGeeks
</a>
</body>
</html>
|
Output:
Reference: https://semantic-ui.com/elements/label.html#basic
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...