Skip to content
Related Articles

Related Articles

Semantic-UI Feed Content

Improve Article
Save Article
  • Last Updated : 16 Mar, 2022
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 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.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI Feed Content</title>
    <link href=
          rel="stylesheet" />
    <script src=
           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 Content</h4>
        <hr>
        <br />
        <div class="ui feed">
            <div class="event">
                <div class="label">
                    <img src=
                </div>
                <div class="content">
                    <div class="summary">
                        Mr. Sandeep at
                        <a href="https://www.geeksforgeeks.org"
                           target="blank">
                            GeeksforGeeks
                        </a> liked your profile.
                    </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="summary">
                        A Node.js article got published at
                        <a href="https://www.geeksforgeeks.org"
                           target="blank">
                            GeeksforGeeks
                        </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="summary">
                        A Git article got published at
                        <a href="https://www.geeksforgeeks.org"
                           target="blank">
                            GeeksforGeeks
                        </a>.
                    </div>
                    <div class="meta">
                        <a class="like">
                            <i class="like icon"></i> 212 Likes
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>


Output:

Semantic-UI Feed Content

Semantic-UI Feed Content

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

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI Feed Content</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 Content</h4>
        <hr>
        <br />
        <div class="ui 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="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="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="meta">
                        <a class="like">
                            <i class="like icon"></i> 212 Likes
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>


Output:

Semantic-UI Feed Content

Semantic-UI Feed Content

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.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI Feed Content</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 Content</h4>
        <hr>
        <br />
        <div class="ui 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:

Semantic-UI Feed Content

Semantic-UI Feed Content

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!