Open In App

Semantic-UI Label Image Content

Improve
Improve
Like Article
Like
Save
Share
Report

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=
    <script src=
    </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=
         GeeksforGeeks
    </a>
</body>
    
</html>


Output:

Semantic-UI Label Image Content

Semantic-UI Label Image Content

 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=
    <script src=
    </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=
          GeeksforGeeks
    </a>
</body>
    
</html>


Output:

Semantic-UI Label Image Content

Semantic-UI Label Image Content

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



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