Semantic-UI Feed Content Label

Last Updated : 06 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 Label Content is used to display the sender or about whom the notification is or came from. It is generally used for an Icon or an Image.

Semantic-UI Feed Label Content Class:

label: The div container with this class usually contains images or icons.

Syntax: Add the label class to a div container and add the image or icon.

<div class="event">
    <div class="label"> ... </div>
    ...
</div>

Below example illustrate the Semantic-UI Feed Content Label:

Example: In the following example, we have used different icons for labels

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> 
    <h1> 
      GeeksforGeeks 
    </h1> 
    <strong> 
      Semantic-UI Feed Content Label 
    </strong> 
    <div class="ui feed"> 
      <div class="event"> 
        <div class="label"> 
          <i class="edit red icon hover"></i> 
        </div> 
        <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> 
      <div class="event"> 
        <div class="label"> 
          <i class="like green round icon"></i> 
        </div> 
        <div class="content"> 
          <div class="date"> 
            2 Days Ago 
          </div> 
          <div class="summary"> 
            Wow! amazing 
          </div> 
          <div class="extra text"> 
            Comment from Guru 
          </div> 
          <div class="meta"> 
            <a class="like"> 
              <i class="like icon"> 
              </i> 
              8 Likes 
            </a> 
          </div> 
        </div> 
      </div> 
    </div> 
</body> 
</html>