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.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Feed Types</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<script src=
"https://code.jquery.com/jquery-3.1.1.min.js"
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</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
<a href="https://www.geeksforgeeks.org"
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
<a href="https://www.geeksforgeeks.org"
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
<a href="https://www.geeksforgeeks.org"
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:
Example 2: In the below example, we have created a standard feed with image content events.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Feed Types</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<script src=
"https://code.jquery.com/jquery-3.1.1.min.js"
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</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
<a href="https://www.geeksforgeeks.org"
target="blank">
GeeksforGeeks
</a>.
</div>
<div class="extra images">
<a>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210310114057/web-development-image.png">
</a>
<a>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210310114057/web-development-image.png">
</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
<a href="https://www.geeksforgeeks.org"
target="blank">
GeeksforGeeks
</a>.
</div>
<div class="extra images">
<a>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182303/ReactJS-Tutorial.png">
</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
<a href="https://www.geeksforgeeks.org"
target="blank">
GeeksforGeeks
</a>.
</div>
<div class="extra images">
<a>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200827091919/DBMS.png">
</a>
</div>
<div class="meta">
<a class="like">
<i class="like icon"></i> 312 Likes
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
References: https://semantic-ui.com/views/feed.html