Semantic-UI Label Ribbon 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 Ribbon type of the Semantic UI framework. The Semantic-UI Label Ribbon types are used to add a label that can appear as a ribbon attaching itself to an element.
Semantic-UI Label Ribbon Type Classes:
- ribbon: This class is used to attach a ribbon to the left side of an element.
- right ribbon: This class is used to attach a ribbon to the right side of an element.
Syntax:
<div class="ui raised segment">
<a class="ui red ribbon label"> Content... </a>
<span> Content... </span>
...
</div>
Example 1: This example describes the uses of Semantic-UI Label Ribbon Type.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI Label Ribbon 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 Ribbon Type</h3>
</div>
<br>
<div class="ui container three column grid">
<div class="column">
<div class="ui raised segment">
<a href="https://www.geeksforgeeks.org/html/"
class="ui ribbon label">HTML</a>
<strong>HTML Tutorials</strong>
<p>
HTML stands for HyperText Markup Language.
It is used to design web pages using a markup
language. It is the combination of Hypertext
and Markup language. Hypertext defines the
link between the web pages. A markup language
is used to define the text document within tag
which defines the structure of web pages.
</p>
</div>
</div>
<div class="column">
<div class="ui raised segment">
<a href="https://www.geeksforgeeks.org/css/"
class="ui ribbon label">CSS</a>
<strong>CSS Tutorials</strong>
<p>
CSS (Cascading Style Sheets) is a stylesheet
language used to design the webpage to make
it attractive. The reason for using this is
to simplify the process of making web pages
presentable. It allows you to apply styles to
web pages. More importantly, it enables you
to do this independent of the HTML that makes
up each web page.
</p>
</div>
</div>
<div class="column">
<div class="ui raised segment">
<a href="https://www.geeksforgeeks.org/javascript/"
class="ui ribbon label">JavaScript</a>
<strong>HTML Tutorials</strong>
<p>
JavaScript is the world most popular lightweight,
interpreted compiled programming language. It is
also known as scripting language for web pages.
It is well-known for the development of web pages,
many non-browser environments also use it.
JavaScript can be used for Client-side developments
as well as Server-side developments.
</p>
</div>
</div>
</div>
</body>
</html>
Output:
Example 2: This example describes the uses of Semantic-UI Label Ribbon Type with color and size variations.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Semantic-UI Label Ribbon 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 Ribbon Type</h3>
</div>
<br>
<div class="ui container three column grid">
<div class="column">
<div class="ui raised segment">
<a href="https://www.geeksforgeeks.org/html/"
class="ui green small ribbon label">HTML</a>
<strong>HTML Tutorials</strong>
<p>
HTML stands for HyperText Markup Language.
It is used to design web pages using a markup
language. It is the combination of Hypertext
and Markup language. Hypertext defines the
link between the web pages. A markup language
is used to define the text document within tag
which defines the structure of web pages.
</p>
</div>
</div>
<div class="column">
<div class="ui raised segment">
<a href="https://www.geeksforgeeks.org/css/"
class="ui blue large ribbon label">CSS</a>
<strong>CSS Tutorials</strong>
<p>
CSS (Cascading Style Sheets) is a stylesheet
language used to design the webpage to make
it attractive. The reason for using this is
to simplify the process of making web pages
presentable. It allows you to apply styles to
web pages. More importantly, it enables you
to do this independent of the HTML that makes
up each web page.
</p>
</div>
</div>
<div class="column">
<div class="ui raised segment">
<a href="https://www.geeksforgeeks.org/javascript/"
class="ui red big ribbon label">JavaScript</a>
<strong>HTML Tutorials</strong>
<p>
JavaScript is the world most popular lightweight,
interpreted compiled programming language. It is
also known as scripting language for web pages.
It is well-known for the development of web pages,
many non-browser environments also use it.
JavaScript can be used for Client-side developments
as well as Server-side developments.
</p>
</div>
</div>
</div>
</body>
</html>
Output:
Reference: https://semantic-ui.com/elements/label.html#ribbon