Semantic-UI Feed Content Additional Information

Last Updated : 02 Feb, 2022

Semantic UI open-source framework gives icons or glyphs that are used to show pictures related to some elements using CSS and jQuery that is used to create great user interfaces. It is a development framework used to create beautiful and responsive layouts.

Semantic-UI Feed is used to display updates chronological wise. A user’s feed or updates to his social media or blog is presented in a standard sequenced way. Contents, dates, like buttons and links, can be placed including images in the Feed.

Semantic-UI Feed Additional Information Content is used to display any extra text or images with the events in the Feed. Additional information is less highlighted and hence should be placed below and is not bold or emphasized.

Semantic-UI Feed Content Additional Information Classes:

extra text: This is used for the extra message or chats text to be displayed as additional content.
extra images: Used to display images as additional content.

Syntax: Inside the content div element, add the additional content elements like text or images as div elements with the classes shown above.

<div class="content">
    ...
    <div class="extra text"> ... </div>
    <div class="extra images"> ... </div>
</div>

Example: In the following example, we have two events with additional content.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<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> 
  
</head> 
  
<body> 
    <center> 
        <h1> 
          GeeksforGeeks 
        </h1> <strong> 
          Semantic-UI Feed Content Additional Information 
        </strong>  
    </center> 
    <br> 
    <strong>Extra Text Content:</strong> 
    <div class="ui feed"> 
        <div class="event"> 
            <div class="content"> 
                <div class="date"> 
                    3 days ago 
                </div> 
                <div class="summary"> 
                    Your post was liked. 
                </div> 
                <div class="extra text"> 
                    Your post is reaching new heights 
                </div> 
            </div> 
        </div> 
        <br> 
        <br> 
        <strong>Extra Images Content:</strong> 
        <div class="content"> 
          <div class="date"> 
            3 days ago 
          </div> 
          <div class="summary"> 
             <a href="#">Geeksforgeeks</a> added 1 photo 
          </div> 
          <div class="extra images"> 
            <a><img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220115184050/gfglogo-100x100.png"> 
            </a> 
  
          </div> 
        </div> 
    </div> 
</body> 
</html>