Semantic-UI Label Image Content

Last Updated : 28 Feb, 2022

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. This framework allows us to use various of its styles and properties to make a website more user-friendly.

A Semantic UI label is used to create meaningful content classifications, labels give descriptions to pieces of content. In the Semantic UI label, 4 types of Content are offered. These are Detail, Icon, Image, and Link types. The Label Image Content is used to display the image with some short content or text with it, for example, name, position, etc.

Semantic-UI Label Image Content Class:

image: This class is used to insert the image inside the label.

Syntax:

<a class="ui image label">
    <img src="image-source">
    ...
</a>

Example 1: The following code demonstrates the label image content using the UI image labels class.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Semantic-UI Label Image Content</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>
      <h1 class="ui header green">
      GeeksforGeeks
    </h1>
    <strong>
      Semantic UI Label Image Content
    </strong>
    <br />
    <a class="ui image label">
        <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
         GeeksforGeeks
    </a>
</body>
  
</html>

Output:

Example 2: To change the color of the image label, we have to add the color in the class.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Semantic-UI Label Image Content</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>
    <h1 class="ui header green">
      GeeksforGeeks
    </h1>
    <strong>
      Semantic UI Label Image Content
    </strong>
    <br />
    <a class="ui green image label">
        <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
          GeeksforGeeks
    </a>
</body>
  
</html>

Output:

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

Semantic-UI Label Content

anuragsingh1022

Improve

Article Tags :

Semantic-UI Label Image Content

Similar Reads

Thank You!

What kind of Experience do you want to share?