Open In App

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:

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.




<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Semantic-UI Label Variations</title>
 
    <link rel="stylesheet" href=
 
    <script src=
    </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.




<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Semantic-UI Label Variations</title>
 
    <link rel="stylesheet" href=
 
    <script src=
    </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=
 
        <!--Image Content-->
        GeeksforGeeks
    </div>
    <div class="ui label">
        <img class="ui Geek image" src=
 
        <!--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>

Output

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


Article Tags :