Open In App

Semantic-UI List Relaxed Variation

Improve
Improve
Like Article
Like
Save
Share
Report

Semantic UI is an open-source development framework that provides pre-defined classes to make our website look beautiful, amazing, and responsive. It is similar to Bootstrap which has predefined classes. It uses jQuery and CSS to create the interfaces. It can also be directly used via CDN like bootstrap.

Semantic-UI list provides us with different variations of the list, like Horizontal, Inverted, Selection, Animated, Relaxed, Divided, Celled, and Size variants. Semantic-UI List Relaxed Variation list is used to relax its padding that provides more negative space inside the list elements.

Semantic-UI List Relaxed Variation Class:

  • relaxed: This class is used to create a relaxed list of items that provides more negative space inside the list elements.

Syntax:

<div class="ui relaxed list">
      <div class="item">
          ...
      </div>
      ...
</div>

Example 1: This example describes the uses of Semantic-UI List Relaxed Variation.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Semantic-UI List Relaxed Variation
    </title>
  
    <link rel="stylesheet"
          href=
</head>
  
<body>
    <div class="ui container">
        <h2 style="color:green">
            GeeksforGeeks
        </h2>
  
        <h3>Semantic-UI List Relaxed Variation</h3>
  
        <div class="ui relaxed list">
            <div class="item">
                <img class="ui avatar image"
                    src=
                <div class="content">
                    <a class="header">GeeksforGeeks</a>
                    <div class="description">
                        A Computer Science portal for geeks. It
                        contains well written, well thought and
                        well explained articles...
                    </div>
                </div>
            </div>
            <div class="item">
                <img class="ui avatar image"
                    src=
                <div class="content">
                    <a class="header">HTML</a>
                    <div class="description">
                        HTML stands for HyperText Markup 
                        Language. It is used to design web 
                        pages using a markup language.
                    </div>
                </div>
            </div>
            <div class="item">
                <img class="ui avatar image"
                    src=
                <div class="content">
                    <a class="header">CSS</a>
                    <div class="description">
                        CSS (Cascading Style Sheets) is a 
                        stylesheet language used to design 
                        the webpage to make it attractive.
                    </div>
                </div>
            </div>
            <div class="item">
                <img class="ui avatar image"
                    src=
                <div class="content">
                    <a class="header">JavaScript</a>
                    <div class="description">
                        JavaScript is the world most popular 
                        lightweight, interpreted compiled 
                        programming language. 
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

Semantic-UI List Relaxed Variation

Semantic-UI List Relaxed Variation

Example 2: This example describes the uses of Semantic-UI List Relaxed Variation.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Semantic-UI List Relaxed Variation
    </title>
  
    <link rel="stylesheet"
          href=
</head>
  
<body>
    <div class="ui container">
        <h2 style="color:green">
            GeeksforGeeks
        </h2>
  
        <h3>Semantic-UI List Relaxed Variation</h3>
  
        <div class="ui relaxed list">
            <div class="item">
                <i class="tags icon"></i>
                <div class="content">
                    <a class="header">GeeksforGeeks</a>
                    <div class="description">
                        A Computer Science portal for geeks. It
                        contains well written, well thought and
                        well explained articles...
                    </div>
                </div>
            </div>
            <div class="item">
                <i class="user secret icon"></i>
                <div class="content">
                    <a class="header">HTML</a>
                    <div class="description">
                        HTML stands for HyperText Markup 
                        Language. It is used to design web 
                        pages using a markup language.
                    </div>
                </div>
            </div>
            <div class="item">
                <i class="thumbtack icon"></i>
                <div class="content">
                    <a class="header">CSS</a>
                    <div class="description">
                        CSS (Cascading Style Sheets) is a 
                        stylesheet language used to design 
                        the webpage to make it attractive.
                    </div>
                </div>
            </div>
            <div class="item">
                <i class="pen square icon"></i>
                <div class="content">
                    <a class="header">JavaScript</a>
                    <div class="description">
                        JavaScript is the world most popular 
                        lightweight, interpreted compiled 
                        programming language. 
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

Semantic-UI List Relaxed Variation

Semantic-UI List Relaxed Variation

Reference: https://semantic-ui.com/elements/list.html#relaxed



Last Updated : 13 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads