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.
<div class="ui item-variations-class item-type-class"> <div class="item"> ... </div> </div>
The below examples illustrate the Semantic UI Item Variations:
Example 2: In this example, the second item is bottom aligned.