Semantic-UI Label Circular Group
Last Updated :
07 Mar, 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 label group, a single class will make the whole label group of the same style. In the Semantic UI label, 4 types of groups are offered. These are Group Size, Coloured Group, Tag Group, Circular Group.
In this article, we will learn to use the Label Circular Group of Semantic UI framework.
The Label Circular group is used to make the shape of the basic label circular. Labels can share shapes in label circular group i.e., if we include the circular class globally then all the labels inside the div can share the same format.
Semantic-UI Label Circular Group Class:
- circular: This class is used to make the label circular.
Syntax:
<div class="ui circular labels">
<a class="ui label">
...
</a>
...
</div>
Example1:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
<script src=
</script>
<title>GeeksforGeeks</title>
</head>
<body>
<br />
<h1 class="ui header green">GeeksforGeeks</h1>
<strong>Semantic UI Label Circular Group</strong>
<div class="ui labels circular">
<a class="ui label">Geeks</a>
<a class="ui label">for</a>
<a class="ui label">Geeks</a>
</div>
</body>
</html>
|
Output:
Example 2: In this example, we will change the colour of the circular label, we have to add the colour in the class.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
<script src=
</script>
<title>GeeksforGeeks</title>
</head>
<body>
<br />
<h1 class="ui header green">GeeksforGeeks</h1>
<strong>Semantic UI Label Circular Group</strong>
<div class="ui labels circular">
<a class="ui green label">Geeks</a>
<a class="ui yellow label">for</a>
<a class="ui red label">Geeks</a>
</div>
</body>
</html>
|
Output:
Example 3: In this example, we will create circular labels without any text.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
<script src=
</script>
<title>GeeksforGeeks</title>
</head>
<body>
<br />
<h1 class="ui header green">GeeksforGeeks</h1>
<strong>Semantic UI Label Circular Group</strong>
<div class="ui labels circular">
<a class="ui green label"></a>
<a class="ui yellow label"></a>
<a class="ui red label"></a>
<a class="ui blue label"></a>
</div>
</body>
</html>
|
Output:
Reference: https://semantic-ui.com/elements/label.html#circular-group
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...