Semantic-UI Item Relaxed Variation

Last Updated : 07 Mar, 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.

Semantic UI Item presents a large collection of similar types of data on a website. The Item can contain an image, heading, description, buttons, date, etc. Item is the collection of items in Semantic UI.

Semantic UI Item Relaxed Variation makes more padding available to the grouped items to make an item more spacious with negative space.

Semantic UI Item Relaxed Variation Classes:

relaxed: This class makes the items relaxed and adds some padding.
very relaxed: This class adds more padding and is more relaxed.

Syntax: Add relaxed or very relaxed class to add more padding to the items as follows:

<div class="ui relaxed items">
    ...
</div>

Example 1: In the following example, we have three option buttons to select from no relaxed, relaxed or very relaxed and we can see the respective outputs.

HTML

<!DOCTYPE html> 
<html> 
    <head> 
        <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
              rel="stylesheet"
            /> 
        <script src= 
"https://code.jquery.com/jquery-3.1.1.min.js"> 
        </script> 
        <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
        </script> 
        <style> 
            body { 
            padding: 10px; 
            margin: 10px; 
            } 
        </style> 
    </head> 
    <body> 
        <div class="ui container"> 
            <center> 
                <div class="ui header green"> 
                    <h1> 
                        GeeksforGeeks 
                    </h1> 
                </div> 
                <strong> 
                Semantic UI Item Relaxed Variation 
                </strong> 
            </center> 
        </div> 
        <center> 
            <div> 
                <div class="ui button" 
                     onclick="relaxedOption('')">Not Relaxed</div> 
                <div class="ui button" 
                     onclick="relaxedOption('relaxed')">Relaxed</div> 
                <div class="ui button" 
                     onclick="relaxedOption('very relaxed')"> 
                    Very Relaxed 
                </div> 
            </div> 
        </center> 
        <div class="ui items" id="gfgrelaxed"> 
            <div class="item"> 
                <div class="ui small image"> 
                    <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220204210810/avatar-200x200.png"/> 
                </div> 
                <div class="middle aligned content"> 
                    <div class="header"> 
                        Data Structures and Algorithms 
                    </div> 
                    <div class="meta"> 
                        <i class="like icon"></i> 
                        <span class="likes"> 
                        31 Likes 
                        </span> 
                    </div> 
                </div> 
            </div> 
            <div class="item"> 
                <div class="ui small image"> 
                    <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220204210810/avatar-200x200.png"/> 
                </div> 
                <div class="middle aligned content"> 
                    <div class="header"> 
                        Machine Learning 
                    </div> 
                    <div class="meta"> 
                        <i class="favorite icon"></i> 
                        <span class="likes"> 
                        123 Favourites 
                        </span> 
                    </div> 
                </div> 
            </div> 
        </div> 
        <script> 
            function relaxedOption(option) { 
              $('#gfgrelaxed').removeClass('very relaxed').removeClass('relaxed') 
              $('#gfgrelaxed').addClass(option) 
            } 
        </script> 
    </body> 
</html>