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
.png)
