Semantic-UI Feed Types
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 type classes, before learning about the feed types.
Semantic UI Feed Type Classes:
- Feed: This is used to create a container, where various chronological events are held.
Syntax:
<div class="ui feed">
<div class="event">
...
</div>
...
</div>
Example 1: In the below example, we have created a standard feed.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI Feed Types</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 Types</h4> <hr> <br/> <div class="ui feed"> <div class="event"> <div class="label"> <i class="pencil alternate icon"></i> </div> <div class="content"> <div class="date"> 5 minutes ago </div> <div class="summary"> A CSS article got published at target="blank"> GeeksforGeeks </a>. </div> <div class="meta"> <a class="like"> <i class="like icon"></i> 21 Likes </a> </div> </div> </div> <div class="event"> <div class="label"> <i class="pencil alternate icon"></i> </div> <div class="content"> <div class="date"> 15 minutes ago </div> <div class="summary"> A React article got published at target="blank"> GeeksforGeeks </a>. </div> <div class="meta"> <a class="like"> <i class="like icon"></i> 54 Likes </a> </div> </div> </div> <div class="event"> <div class="label"> <i class="pencil alternate icon"></i> </div> <div class="content"> <div class="date"> 2 hours ago </div> <div class="summary"> A Database article got published at target="blank"> GeeksforGeeks </a>. </div> <div class="meta"> <a class="like"> <i class="like icon"></i> 312 Likes </a> </div> </div> </div> </div> </div> </body> </html> |
Output:
Semantic-UI Feed Types
Example 2: In the below example, we have created a standard feed with image content events.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI Feed Types</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 Types</h4> <hr> <br /> <div class="ui feed"> <div class="event"> <div class="label"> <i class="pencil alternate icon"></i> </div> <div class="content"> <div class="date"> 5 minutes ago </div> <div class="summary"> Two web development articles got published at target="blank"> GeeksforGeeks </a>. </div> <div class="extra images"> <a> <img src= </a> <a> <img src= </a> </div> <div class="meta"> <a class="like"> <i class="like icon"></i> 21 Likes </a> </div> </div> </div> <div class="event"> <div class="label"> <i class="pencil alternate icon"></i> </div> <div class="content"> <div class="date"> 15 minutes ago </div> <div class="summary"> A React 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> 54 Likes </a> </div> </div> </div> <div class="event"> <div class="label"> <i class="pencil alternate icon"></i> </div> <div class="content"> <div class="date"> 2 hours ago </div> <div class="summary"> A Database 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> 312 Likes </a> </div> </div> </div> </div> </div> </body> </html> |
Output:
Semantic-UI Feed Types
References: https://semantic-ui.com/views/feed.html
Please Login to comment...