Semantic-UI Feed Content
Last Updated :
16 Mar, 2022
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
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
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
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
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
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
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
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
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
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
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
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
Reference: https://semantic-ui.com/views/feed.html
Share your thoughts in the comments
Please Login to comment...