Semantic-UI Item Variations
Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks.
A Semantic UI Item is used to display large amounts of content on a page. The Semantic UI Item Variation offers us 6 types of variations that can be used with this item for changing the type of display of this item.
Semantic UI Item Variations:
- Stacking: This is used to create a table where the items stack responsively.
- Divided: This is used so the items can be divided in such a way that the grouped content is easy to distinguish.
- Relaxed: This is used to create a group of items that have relaxed padding for more space between items.
- Link Item: This is used so the item’s contents link to another page.
- Vertical Alignment: This is used to specify the item’s vertical alignment.
- Floating Content: This is used to make the elements float to the left or right.
Note: The Relaxed variant can not be used with Divided or Stacking as these 3 are opposite to each other.
Syntax:
<div class="ui item-variations-class item-type-class">
<div class="item">
...
</div>
</div>The below examples illustrate the Semantic UI Item Variations:
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 Variations</strong> </center> <br><br> <strong>Divided, Floating and Link Item Variant:</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 Variations
Example 2: In this example, the second item is bottom aligned.
HTML
<!DOCTYPE html><html> <head> <link href= rel="stylesheet" /> </head> <body> <center> <h1 class="ui header green"> GeeksforGeeks </h1> <strong>Semantic-UI Item Variations</strong> </center> <br><br> <strong>Stacking, Vertical Alignment Item Variant:</strong> <br> <div class="ui unstackable items container"> <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 class="item"> <div class="ui small image"> <img src= </div> <div class="bottom aligned content"> <div class="header"> Geeksforgeeks </div> </div> </div> </div> </body></html> |
Output:
Semantic UI Item Variations
Reference: https://semantic-ui.com/views/item.html#variations
Please Login to comment...