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.
A feed shows the user activity. For example Newsfeed on Facebook.
Example 1: This example creating the feed content using Semantic-ui.
<!DOCTYPE html> <html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
<script src=
</script>
</head>
<body>
<div style="margin-top: 20px" class="ui container">
<div class="ui feed">
<div class="event">
<div class="label">
<img src=
</div>
<div class="content">
<div class="summary">
<a class="user">
Geeksforgeeks
</a> starting following you.
<div class="date">
2 Hour Ago
</div>
</div>
<div class="meta">
<a class="like">
<i class="like icon"></i> 1k Likes
</a>
</div>
</div>
</div>
<div class="event">
<div class="label">
<img src=
</div>
<div class="content">
<div class="summary">
<a>Geeksforgeeks</a> changed </br>
thier profile picture
<div class="date">
6 days ago
</div>
</div>
<div class="extra images">
<a><img src=
</div>
<div class="meta">
<a class="like">
<i class="like icon"></i> 120k Like
</a>
</div>
</div>
</div>
<div class="event">
<div class="label">
<img src=
</div>
<div class="content">
<div class="summary">
<a>Geeksforgeeks</a>
<div class="date">
3 days ago
</div>
</div>
<div class="extra text">
New courses are available on</br>
20% discount for summer.
</div>
<div class="meta">
<a class="like">
<i class="like icon"></i> 5 Likes
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
Example 2: This example creating the feed content with icon using Semantic-ui.
<!DOCTYPE html> <html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
<script src=
</script>
</head>
<body>
<div style="margin-top: 20px" class="ui container">
<div class="ui feed">
<div class="event">
<div class="label">
<i class="computer icon"></i>
</div>
<div class="content">
<div class="summary">
Geeksforgeeks just
launched new Courses.
<div class="date">
1 hour ago.
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
|
Output: