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 = "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 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 = "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:
Example 2: In this example, the second item is bottom aligned.
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 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 = "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 class = "item" > < div class = "ui small image" > < img src = "https://media.w3wiki.net/wp-content/uploads/20220123013311/gfg.png" > </ div > < div class = "bottom aligned content" > < div class = "header" > w3wiki </ div > </ div > </ div > </ div > </ body > </ html > |
Output:
Reference: https://semantic-ui.com/views/item.html#variations
Contact Us