Semantic-UI Label Content

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. The best part about this framework is that it creates beautiful and responsive layouts as it contains pre-built semantic components

A label is an important component of our website that displays information to the user. Now, these labels can be created in various ways and can have different looks and feel. We can create a label with an icon beside it, with an image beside it and etc. This can be achieved with the help of Label Content which provides various properties to our Label.

Semantic UI Label Content:

Detail: If we want our label to display any detailed message then Detail Label Content is used. It displays the detail of the label.
Icon: If we want our label to display an icon then Icon Label Content is used. This label displays the selected icon.
Image: If we want our label to display any particular image then Image Label Content is used. This label displays the selected image.
Link: If we want our label to be in a form of a link then Link Label Content is used. This label is in the form of a link.

Syntax:

<div class="ui label">
    <div class="label-content">
           ...
    </div>
</div>

Example 1: In the following example, we will be using the Detail and Icon Label Content Classes.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Semantic-UI Label Variations</title>
 
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
 
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
</head>
 
<body>
    <br>
    <div class="ui green huge header">
        GeeksforGeeks
    </div>
     
    <div class="ui large header">Label Content</div>
    <br>
    <div class="ui Big header">Detail</div>
    <div class="ui label">
        Cricket
        <div class="detail">
            <!--Detail Content-->
            Sport played with a bat and a ball.
        </div>
    </div>
    <br>
    <br>
     
    <div class="ui label">
        Football
        <div class="detail">
            <!--Detail Content-->
            Sport played with a ball.
        </div>
    </div>
    <div class="ui Big header">Icon</div>
    <div class="ui label">
        <i class="truck icon"></i>
        <!--Icon Content-->
        This Is Truck
    </div>
    <div class="ui label">
        <i class="motorcycle icon"></i>
        <!--Icon Content-->
        This Is Motorcycle
    </div>
</body>
 
</html>

Output

Example 2: In the following example, we will be using the Image and Link Label Content Classes.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Semantic-UI Label Variations</title>
 
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
 
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
</head>
 
<body>
    <br>
    <div class="ui green huge header">
        GeeksforGeeks
    </div>
     
    <div class="ui large header">Label Content</div>
    <br>
    <div class="ui Big header">Image</div>
    <div class="ui label">
        <img class="ui Geek image" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png">
 
        <!--Image Content-->
        GeeksforGeeks
    </div>
    <div class="ui label">
        <img class="ui Geek image" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png">
 
        <!--Image Content-->
        All Hail GFG
    </div>
    <div class="ui Big header">Link</div>
    <a class="ui label">
        <!--Link Content-->
        <i class="truck icon"></i> Truck
    </a>
    <a class="ui label">
        <!--Link Content-->
        <i class="mail icon"></i> Mail
    </a>
</body>
 
</html>