Semantic-UI Label Image Type Last Updated : 01 Mar, 2022 Summarize Comments Improve Suggest changes Share Like Article Like Report 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 More infoAdvertise with us Next Article Semantic-UI Label Image Type B blalverma92 Follow Improve Article Tags : Web Technologies CSS Geeks Premier League Geeks-Premier-League-2022 Semantic-UI Semantic-UI Elements +1 More Similar Reads Semantic-UI Image Link Type 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 websit 2 min read Semantic-UI Label Types 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 con 2 min read Semantic-UI Image Types 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 various different elements to use to make your website look more amazing. Semantic UI provides us with a very easy way to style images. It offers images of d 3 min read Semantic-UI Label Floating Type 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. In this article, we will learn to use the Label Floa 2 min read Semantic-UI Label Attached Type 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 con 6 min read Like