Semantic-UI Feed Content

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. It uses a class to add CSS to the elements.

Feed elements are used to document the website/user’s activity in a sequential manner. The feed contains various events performed by various users. Semantic UI provides us with a styled feed. Let’s have a look at various feed content.

Semantic UI Feed Content:

• Label: Semantic UI allows us to add a label to the feed such as an image, icon, etc using the label class.
• Date: Semantic UI allows us to add a timestamp to the feed content indicating its origin using the date class.
• Additional Information: We can add a bunch of additional content to the feed such as a set of images, text, etc using the extra class.

Syntax:

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

Example 1: In the below example, we have created a feed with label events.

Output:

Example 2: In the below example, we have created an event with dates using date class.

Output:

Example 3: In the below example, we have created a feed with informative events using extra class. Both extra text and extra images are shown.

Output:

Reference: https://semantic-ui.com/views/feed.html