Semantic-UI Label Ribbon Type - Coding

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

Reffered: https://www.geeksforgeeks.org

CSS

Related
Semantic-UI Form Inline Field Variation
Foundation CSS Kitchen Sink Float
Semantic-UI Form Inverted Variation
Semantic-UI Equal Width Form Variation
Bulma Hero Fullheight with Navbar

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	7