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 = rel = "stylesheet" /> </ head > < body > < center > < h1 class = "ui header green" > GeeksforGeeks </ 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 = </ div > < div class = "content" > < a class = "header" Geeksforgeeks </ a > < div class = "meta" > < span >A Computer Science Portal for Geeks</ span > </ div > < div class = "extra" > This is where GeeksforGeeks comes into picture - A computer science portal for geeks, by geeks. ...GeeksforGeeks.org 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:

Semantic-UI Item Type
Example 2:
HTML
<!DOCTYPE html> < html > < head > < link href = rel = "stylesheet" /> </ head > < body > < center > < h1 class = "ui header green" > GeeksforGeeks </ 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 = </ div > < div class = "content" > < a class = "header" Geeksforgeeks </ a > < div class = "meta" > < span >A Computer Science Portal for Geeks</ span > </ div > < div class = "extra" > This is where GeeksforGeeks comes into picture - A computer science portal for geeks, by geeks. ...GeeksforGeeks.org 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 = </ div > < div class = "content" > < a class = "header" >Sandeep Jain</ a > < div class = "meta" > < span >Founder of Geeksforgeeks</ 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:

Semantic-UI Item Type
Reference: https://semantic-ui.com/views/item.html
Please Login to comment...