Open In App

Semantic-UI Item Image Content

Improve
Improve
Like Article
Like
Save
Share
Report

Semantic UI is a modern framework used in developing seamless designs for the website. It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks.

Semantic UI Item presents a large collection of similar types of data on a website. The Item can contain an image, heading, description, buttons, date, etc. Item is the collection of items in Semantic UI.

Semantic UI Item Image Content enables us to use images in the items. Images can be placed inside the item container with the help of this class.

Semantic UI Item Image Content Classes:

  • image: This class means that the content inside the container is an image so the necessary padding, alignment is provided.

Syntax: Add the image class to the item container as follows:

<div class="item">
    <div class="ui image">
        <img src="..." />
    </div>
</div>

Example: In the following example, we have a list of items containing images using the item and image class.

HTML




<!DOCTYPE html>
<html>
    <head>
        <link href=
             rel="stylesheet"/>
        <script src=
        </script>
        <script src=
        </script>
    </head>
    <body>
        <div class="ui container">
            <center>
                <h1 class="ui header green"> GeeksforGeeks</h1>
                <strong> Semantic UI Item Image Content </strong>
            </center>
         
         <div class="ui items">
            <div class="item">
               <span> Image 1:</span>
                <div class="ui image">
                    <img src=
                </div>
            </div>
            <div class="item">
               <span> Image 2:</span>
                <div class="ui image ">
                    <img src=
                </div>
            </div>           
          </div>
        </div>
    </body>
</html>


Output:            

Reference: https://semantic-ui.com/views/item.html#image



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