Semantic-UI Item Types
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.
Semantic-UI Item types offer us Items that have been used to create multiple items. The Item view presents large collections of site content for display.
Semantic-UI Item Type Class:
- Items: This is the only type in the Item.
Syntax:
<div class="ui items"> ... </div>
Below examples illustrate the Semantic-UI Item Type:
Example 1:
HTML
<!DOCTYPE html> < html > < head > < link href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel = "stylesheet" /> </ head > < body > < center > < h1 class = "ui header green" > w3wiki </ h1 > < strong >Semantic-UI Item Types</ strong > </ center > < br >< br > < strong >Items Type:</ strong > < br > < div class = "ui divided items container" > < div class = "item" > < div class = "image" > < img src = "https://media.w3wiki.net/wp-content/uploads/20220123013311/gfg.png" > </ div > < div class = "content" > < a class = "header" w3wiki </ a > < div class = "meta" > < span >A Computer Science Portal for Beginner</ span > </ div > < div class = "extra" > This is where w3wiki comes into picture - A computer science portal for Beginner, by Beginner. ...w3wiki.net was created with a goal in mind to provide well written, well thought and well explained solutions for selected questions. </ div > </ div > </ div > </ div > </ body > </ html > |
Output:
Example 2:
HTML
<!DOCTYPE html> < html > < head > < link href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel = "stylesheet" /> </ head > < body > < center > < h1 class = "ui header green" > w3wiki </ h1 > < strong >Semantic-UI Item Types</ strong > </ center > < br >< br > < strong >Items Type:</ strong > < br > < div class = "ui divided items container" > < div class = "item" > < div class = "image" > < img src = "https://media.w3wiki.net/wp-content/uploads/20220123013311/gfg.png" > </ div > < div class = "content" > < a class = "header" w3wiki </ a > < div class = "meta" > < span >A Computer Science Portal for Beginner</ span > </ div > < div class = "extra" > This is where w3wiki comes into picture - A computer science portal for Beginner, by Beginner. ...w3wiki.net was created with a goal in mind to provide well written, well thought and well explained solutions for selected questions. </ div > </ div > </ div > < div class = "item" > < div class = "image" > < img src = "https://media.w3wiki.net/wp-content/uploads/20220211141617/Screenshot20220211141558-200x189.png" > </ div > < div class = "content" > < a class = "header" >Sandeep Jain</ a > < div class = "meta" > < span >Founder of w3wiki</ span > </ div > < div class = "extra" > < p > Expert Advice series, we’re constantly trying to provide you with several enriching advice and mentorship every month to resolve all your career-related concerns and make your journey smoother. </ p > < div class = "ui right floated green button" > Connect </ div > </ div > </ div > </ div > </ div > </ body > </ html > |
Output:
Reference: https://semantic-ui.com/views/item.html