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