Semantic-UI Feed Content Label
Last Updated :
06 Feb, 2022
Semantic UI open-source framework gives icons or glyphs that are used to show pictures related to some elements using CSS and jQuery that is used to create 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 Label Content is used to display the sender or about whom the notification is or came from. It is generally used for an Icon or an Image.
Semantic-UI Feed Label Content Class:
- label: The div container with this class usually contains images or icons.
Syntax: Add the label class to a div container and add the image or icon.
<div class="event">
<div class="label"> ... </div>
...
</div>Below example illustrate the Semantic-UI Feed Content Label:
Example: In the following example, we have used different icons for labels
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<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">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
<strong>
Semantic-UI Feed Content Label
</strong>
<div class="ui feed">
<div class="event">
<div class="label">
<i class="edit red icon hover"></i>
</div>
<div class="content">
<div class="date">
3 days ago
</div>
<div class="summary">
Your post was liked.
</div>
<div class="extra text">
Your post is reaching new heights
</div>
</div>
</div>
<div class="event">
<div class="label">
<i class="like green round icon"></i>
</div>
<div class="content">
<div class="date">
2 Days Ago
</div>
<div class="summary">
Wow! amazing
</div>
<div class="extra text">
Comment from Guru
</div>
<div class="meta">
<a class="like">
<i class="like icon">
</i>
8 Likes
</a>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
Semantic-UI Feed Content Label
Reference: https://semantic-ui.com/elements/label.html
Similar Reads
Computer Science Subjects