Semantic-UI Feed Content Label
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 > w3wiki </ 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:
Reference: https://semantic-ui.com/elements/label.html