Semantic-UI Label Image Type

Last Updated : 1 Mar, 2022

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 Image Type of the Semantic UI framework. The Semantic-UI Label Image Type is used to add labels that can be formatted to emphasize an image.

Semantic-UI Label Image Type Class:

  • image: This class is used to add images to the label element.

Example 1: This example describes the uses of Semantic-UI Label Image Type.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>
        Semantic-UI Label Image 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">
        <h2 style="color:green">
            GeeksforGeeks
        </h2>

        <h3>Semantic-UI Label Image Type</h3>

        <div class="ui image label">
            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
            GeeksforGeeks
        </div>
        <div class="ui image label">
            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203170945/HTML-Tutorials.png">
            HTML
        </div>
        <div class="ui image label">
            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png">
            CSS
        </div>
        <div class="ui image label">
            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182259/BootstrapTutorial.png">
            Bootstrap
        </div>
    </div>
</body>

</html>

Output:

Example 2: This example describes the uses of Semantic-UI Label Image Type with size variations.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>
        Semantic-UI Label Image 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">
        <h2 style="color:green">
            GeeksforGeeks
        </h2>

        <h3>Semantic-UI Label Image Type</h3>

        <div class="ui image small label">
            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
            GeeksforGeeks
        </div>
        <div class="ui image label">
            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203170945/HTML-Tutorials.png">
            HTML
        </div>
        <div class="ui image large label">
            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png">
            CSS
        </div>
        <div class="ui image big label">
            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182259/BootstrapTutorial.png">
            Bootstrap
        </div>
    </div>
</body>

</html>

Output:

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

Comment

Explore