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:
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:
Reference: https://semantic-ui.com/views/item.html