Semantic-UI Item Variations
Last Updated :
22 Apr, 2022
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...