Semantic-UI Item Extra Content

Last Updated : 14 Feb, 2022

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 site. The Item can contain an image, heading, description, buttons, date, etc. Item is the collection of items in Semantic UI.

Semantic UI Item Extra Content is used to place extra content in the Item that needs to be separate from the main content. So the content is formatted separately.

Semantic UI Item Extra Content Classes:

extra: The container with this class is formatted separately from the content container.

Syntax: Add the container with class extra to display extra content as follows:

<div class="item">
  ...
  <div class="content">
    ...
    <div class="extra"> ... </div>
  </div>
</div>

Example: In the following example, we have two items with extra content containing icons and text.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
          rel="stylesheet" /> 
    <script src= 
"https://code.jquery.com/jquery-3.1.1.min.js"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
    <style> 
        body { 
            padding: 10px; 
            margin: 10px; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="ui container"> 
        <center> 
            <div class="ui header green"> 
                <h1>GeeksforGeeks</h1> 
            </div> 
            <strong>Semantic UI Item Extra Content</strong> 
        </center> 
    </div> 
    <div class="ui items"> 
        <div class="item"> 
            <div class="ui small image"> 
                <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220204210810/avatar-200x200.png" /> 
            </div> 
            <div class="content"> 
                <div class="header">Data Structures and Algorithms</div> 
                <div class="meta"> 
                    <span class="likes">30 Likes</span> 
                    <span class="views">10000 Views</span> 
                </div> 
                <div class="description"> 
                    <p>Lots of high quality tutorials in GeeksforGeeks</p> 
                </div> 
                <div class="extra"> 
                    <i class="chart line icon"></i> 
                    Trending 
                </div> 
            </div> 
        </div> 
        <div class="item"> 
            <div class="ui small image"> 
                <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220204210810/avatar-200x200.png" /> 
            </div> 
            <div class="content"> 
                <div class="header">Machine Learning</div> 
                <div class="meta"> 
                    <span class="likes">123 Likes</span> 
                    <span class="views">2300 Views</span> 
                </div> 
                <div class="description"> 
                    <p> 
                      Get started with Machine Learning with GeeksforGeeks 
                    </p> 
                </div> 
                <div class="extra"> 
                    <i class="chart line icon"></i> 
                    Top Grossing 
                </div> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>