Semantic-UI Label Corner Type
Last Updated :
01 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. In this article, we will learn to use the Semantic-UI Label Corner Type of the Semantic UI framework. The Semantic-UI Label Corner Type is used to add the position of the label to the corner of an element.
Semantic-UI Label Corner Type Classes:
- left corner: This class is used to add labels to the left corner.
- right corner: This class is used to add labels to the right corner.
Example 1: This example describes the uses of Semantic-UI Label Corner Type.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI Label Corner Type
</title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
</head>
<body>
<div class="ui container center aligned">
<h2 style="color:green">
GeeksforGeeks
</h2>
<h3>Semantic-UI Label Corner Type</h3>
<div class="ui four column grid">
<div class="column">
<div class="ui fluid image">
<a class="ui left corner label">
<i class="edit icon"></i>
</a>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203170945/HTML-Tutorials.png">
</div>
</div>
<div class="column">
<div class="ui fluid image">
<a class="ui right corner label">
<i class="save icon"></i>
</a>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png">
</div>
</div>
<div class="column">
<div class="ui fluid image">
<a class="ui left corner label">
<i class="eraser icon"></i>
</a>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182259/BootstrapTutorial.png">
</div>
</div>
<div class="column">
<div class="ui fluid image">
<a class="ui right corner label">
<i class="cut icon"></i>
</a>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210210175213/JavaScriptTutorial.png">
</div>
</div>
</div>
</div>
</body>
</html>
Output:
Example 2: This example describes the uses of Semantic-UI Label Corner Type with color and size variations.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI Label Corner Type
</title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
</head>
<body>
<div class="ui container center aligned">
<h2 style="color:green">
GeeksforGeeks
</h2>
<h3>Semantic-UI Label Corner Type</h3>
<div class="ui four column grid">
<div class="column">
<div class="ui fluid image">
<a class="ui left corner green large label">
<i class="edit icon"></i>
</a>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203170945/HTML-Tutorials.png">
</div>
</div>
<div class="column">
<div class="ui fluid image">
<a class="ui right corner red tiny label">
<i class="save icon"></i>
</a>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png">
</div>
</div>
<div class="column">
<div class="ui fluid image">
<a class="ui left corner yellow big label">
<i class="eraser icon"></i>
</a>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182259/BootstrapTutorial.png">
</div>
</div>
<div class="column">
<div class="ui fluid image">
<a class="ui right corner blue mini label">
<i class="cut icon"></i>
</a>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210210175213/JavaScriptTutorial.png">
</div>
</div>
</div>
</div>
</body>
</html>
Output:
Reference: https://semantic-ui.com/elements/label.html#corner