Skip to content
Related Articles

Related Articles

Semantic-UI Feed Variations

View Discussion
Improve Article
Save Article
  • Last Updated : 24 Mar, 2022
View Discussion
Improve Article
Save Article

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.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI Feed Variations</title>
    <link href=
         rel="stylesheet" />
  
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
        crossorigin="anonymous">
    </script>
  
    <script src=
    </script>
</head>
  
<body>
    <div class="ui container">
        <h2 class="ui green header">GeeksforGeeks</h2>
        <h4>Semantic UI Feed Variations</h4>
        <hr />
        <br />
        <div class="ui small feed">
            <div class="event">
                <div class="label">
                    <img src=
                </div>
                <div class="content">
                    <div class="date">
                        15 minutes ago
                    </div>
                    <div class="summary">
                        Mr. Sandeep at
                        <a href="https://www.geeksforgeeks.org" 
                            target="blank">
                            GeeksforGeeks
                        </a>
                        liked your profile.
                    </div>
                    <div class="extra text">
                        Hey there, I really liked your 
                        profile. Ping me if you are up 
                        for a conversation.
                    </div>
                    <div class="meta">
                        <a class="like"
                            <i class="like icon"></i
                            39 Likes 
                        </a>
                    </div>
                </div>
            </div>
            <div class="event">
                <div class="label">
                    <i class="pencil icon"></i>
                </div>
                <div class="content">
                    <div class="date">
                        45 minutes ago
                    </div>
                    <div class="summary">
                        A Node.js article got published at
                        <a href="https://www.geeksforgeeks.org" 
                            target="blank">
                            GeeksforGeeks
                        </a>
                        .
                    </div>
                    <div class="extra images">
                        <a>
                            <img src=
                        </a>
                    </div>
                    <div class="meta">
                        <a class="like"
                            <i class="like icon"></i> 124 Likes 
                        </a>
                    </div>
                </div>
            </div>
            <div class="event">
                <div class="label">
                    <i class="pencil alternate icon"></i>
                </div>
                <div class="content">
                    <div class="date">
                        3 hours ago
                    </div>
                    <div class="summary">
                        A Git article got published at
                        <a href="https://www.geeksforgeeks.org" 
                            target="blank">
                            GeeksforGeeks
                        </a>
                        .
                    </div>
                    <div class="extra images">
                        <a>
                            <img src=
                        </a>
                    </div>
                    <div class="meta">
                        <a class="like"
                            <i class="like icon"></i> 212 Likes 
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

Small Sized Feed

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

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI Feed Variations</title>
    <link href=
         rel="stylesheet" />
  
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
        crossorigin="anonymous">
    </script>
  
    <script src=
    </script>
</head>
  
<body>
    <div class="ui container">
        <h2 class="ui green header">GeeksforGeeks</h2>
        <h4>Semantic UI Feed Variations</h4>
        <hr />
        <br />
        <div class="ui large feed">
            <div class="event">
                <div class="label">
                    <img src=
                </div>
                <div class="content">
                    <div class="date">
                        15 minutes ago
                    </div>
                    <div class="summary">
                        Mr. Sandeep at
                        <a href="https://www.geeksforgeeks.org"
                             target="blank">
                            GeeksforGeeks
                        </a>
                        liked your profile.
                    </div>
                    <div class="extra text">
                        Hey there, I really liked your 
                        profile. Ping me if you are up 
                        for a conversation.
                    </div>
                    <div class="meta">
                        <a class="like"
                            <i class="like icon"></i> 39 Likes 
                        </a>
                    </div>
                </div>
            </div>
            <div class="event">
                <div class="label">
                    <i class="pencil icon"></i>
                </div>
                <div class="content">
                    <div class="date">
                        45 minutes ago
                    </div>
                    <div class="summary">
                        A Node.js article got published at
                        <a href="https://www.geeksforgeeks.org" 
                            target="blank">
                            GeeksforGeeks
                        </a>
                        .
                    </div>
                    <div class="extra images">
                        <a>
                            <img src=
                        </a>
                    </div>
                    <div class="meta">
                        <a class="like"
                            <i class="like icon"></i> 124 Likes 
                        </a>
                    </div>
                </div>
            </div>
            <div class="event">
                <div class="label">
                    <i class="pencil alternate icon"></i>
                </div>
                <div class="content">
                    <div class="date">
                        3 hours ago
                    </div>
                    <div class="summary">
                        A Git article got published at
                        <a href="https://www.geeksforgeeks.org" 
                            target="blank">
                            GeeksforGeeks
                        </a>
                        .
                    </div>
                    <div class="extra images">
                        <a>
                            <img src=
                        </a>
                    </div>
                    <div class="meta">
                        <a class="like"
                            <i class="like icon"></i> 212 Likes 
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

Large sized feed

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!