Skip to content
Related Articles

Related Articles

Semantic-UI Item Variations

View Discussion
Improve Article
Save Article
  • Last Updated : 22 Apr, 2022
View Discussion
Improve Article
Save Article

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"
                 href="https://www.geeksforgeeks.org/">
                  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

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

Semantic UI Item Variations

Reference: https://semantic-ui.com/views/item.html#variations


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!