Semantic UI open-source framework gives icons or glyphs that are used to show pictures related to some elements using CSS and jQuery for great user interfaces. It is a development framework used to create beautiful and responsive layouts.
Semantic-UI Feed is used to display updates chronological-wise. A user's feed or updates to his social media or blog is presented in a standard sequenced way. Contents, dates, like buttons and links, can be placed including images in the feed.
Semantic-UI Feed Date Content displays the date in the content of the feed. The date should be placed in a proper style and alignment to see the update clearly
Semantic-UI Feed Date Content classes:
- date: This class is used to define or mention the date.
Syntax:
<div class="content">
<div class="date"> ... </div>
...
</div>
Below example illustrate the Semantic-UI Feed Content Date:
Example: In the following example, we have three events with dates in the content inside the feed.
<!DOCTYPE html>
<html lang="en">
<head>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet"/>
<style>
div {
margin-left: 15px;
}
</style>
</head>
<body>
<center>
<h1>
GeeksforGeeks
</h1>
<strong>
Semantic-UI Feed Content Date
</strong>
</center>
<div class="ui feed">
<div class="content">
<div class="date">
3 days ago
</div>
<div class="summary">
Your post was liked
</div>
</div>
</div>
<div class="event">
<div class="content">
<div class="summary">
Wow! amazing
<div class="date">
2 Days Ago
</div>
</div>
<div class="meta">
<a class="like">
<i class="like icon">
</i>
8 Likes
</a>
</div>
</div>
</div>
<div class="event">
<div class="content">
<div class="summary">
GeeksforGeeks posted a new post
<div class="date">
7 Days Ago
</div>
</div>
<div class="meta">
<a class="like">
<i class="like icon">
</i>
5 Likes
</a>
</div>
</div>
</div>
</body>
</html>
Output:
Reference: https://semantic-ui.com/views/feed.html#date