Open In App

Semantic-UI Label Corner Type

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 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=
</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=
                </div>
            </div>
  
            <div class="column">
                <div class="ui fluid image">
                    <a class="ui right corner label">
                        <i class="save icon"></i>
                    </a>
                    <img src=
                </div>
            </div>
  
            <div class="column">
                <div class="ui fluid image">
                    <a class="ui left corner label">
                        <i class="eraser icon"></i>
                    </a>
                    <img src=
                </div>
            </div>
  
            <div class="column">
                <div class="ui fluid image">
                    <a class="ui right corner label">
                        <i class="cut icon"></i>
                    </a>
                    <img src=
                </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=
</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=
                </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=
                </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=
                </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=
                </div>
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

Reference: https://semantic-ui.com/elements/label.html#corner



Last Updated : 01 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads