Open In App

Semantic-UI Label Ribbon Type

Last Updated : 01 Mar, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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=
</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=
</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



Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads