Semantic-UI Feed Variations

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 Semantic UI styled feed. Let’s have a look at various feed variation classes, before learning about the feed variations.

Semantic UI Feed Variation Classes:

• feed: Creates a container, where various chronological events are held.
• event: Holds the event information, it is a part of the feed.
• content: Creates a container for the event content.
• summary: Creates a container for brief information about the event.
• label: Creates a label for the event, which can hold icons, images, etc.
• date: Holds information about the event date.
• meta: Hold meta-information about the event such as likes, dislikes, etc.
• small: Creates a small feed.
• large: Creates a large feed.

Syntax:

<div class="ui size-class feed">
    <div class="event">
        ...
    </div>
    ...
</div>

Example 1: In the below example, we have created a small feed.

Output:

Small Sized Feed

Example 2: In the below example, we have created a large-sized feed.

Output:

Large sized feed

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