Semantic-UI | Feed
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 = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel = "stylesheet" /> < script src = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" > </ script > </ head > < body > < div style = "margin-top: 20px" class = "ui container" > < div class = "ui feed" > < div class = "event" > < div class = "label" > < img src = "https://media.w3wiki.net/wp-content/uploads/20200510132051/image30.png" > </ div > < div class = "content" > < div class = "summary" > < a class = "user" > w3wiki </ 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 = "https://media.w3wiki.net/wp-content/uploads/20200510132051/image30.png" > </ div > < div class = "content" > < div class = "summary" > < a >w3wiki</ a > changed </ br > thier profile picture < div class = "date" > 6 days ago </ div > </ div > < div class = "extra images" > < a >< img src = "https://media.w3wiki.net/wp-content/uploads/20200510132051/image30.png" ></ a > </ 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 = "https://media.w3wiki.net/wp-content/uploads/20200510132051/image30.png" > </ div > < div class = "content" > < div class = "summary" > < a >w3wiki</ 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 = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel = "stylesheet" /> < script src = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" > </ 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" > w3wiki just launched new Courses. < div class = "date" > 1 hour ago. </ div > </ div > </ div > </ div > </ div > </ div > </ body > </ html > |
Output: