Skip to content
Related Articles

Related Articles

Semantic-UI List Variations

View Discussion
Improve Article
Save Article
  • Last Updated : 25 Mar, 2022
View Discussion
Improve Article
Save Article

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. It uses a class to add CSS to the elements. 

A list is an excellent way to group a set of related items. It is an important part of a website. Semantic UI gives us a semantic UI-styled list. Let’s have a look at various list variations.

Semantic UI List Variations:

  • Horizontal: Positions the list in a horizontal fashion.
  • Inverted: Inverts the colors of the list.
  • Selection: This allows the user to select items from the list.
  • Animation: Animates a particular item in a list.
  • Relaxed: Provides more padding among list items, making them more spaced out.
  • Divided: Creates a division among list items.
  • Celled: Divided the list items into individual cells.
  • Size: Varies the size of the list.

Syntax:

<div class="ui Horizontal-Variation Inverted-Variation 
    Selection-Variation Animation-Variation Relaxed-Variation 
    Divided Variation Celled-Variation Size-Variation list">
      <div class="item">
        ...
      </div>
      ...
</div>

Example 1: In the below example, we have created a horizontal list.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI List Variations</title>
    <link href=
         rel="stylesheet" />
 
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
 
    <script src=
    </script>
</head>
 
<body>
    <div class="ui container">
        <h2 class="ui green header">
            GeeksforGeeks
        </h2>
         
        <h4>Semantic UI List Variations</h4>
        <hr />
        <br />
        <div class="ui horizontal list">
            <div class="item">
                Machine Learning
            </div>
            <div class="item">
                Blockchain
            </div>
            <div class="item">
                Data Science
            </div>
            <div class="item">
                Web Development
            </div>
        </div>
    </div>
</body>
 
</html>


Output:

Horizontal List

Example 2: In the below example, we have created an inverted list.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI List Variations</title>
    <link href=
         rel="stylesheet" />
 
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
 
    <script src=
    </script>
</head>
 
<body>
    <div class="ui container">
        <h2 class="ui green header">
            GeeksforGeeks
        </h2>
         
        <h4>Semantic UI List Variations</h4>
        <hr />
        <br />
        <div class="ui inverted segment">
            <div class="ui horizontal inverted list">
                <div class="item">
                    Machine Learning
                </div>
                <div class="item">
                    Blockchain
                </div>
                <div class="item">
                    Data Science
                </div>
                <div class="item">
                    Web Development
                </div>
            </div>
        </div>
    </div>
</body>
 
</html>


Output:

Inverted List

Example 3: In the below example, we have created a selection list.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI List Variations</title>
    <link href=
         rel="stylesheet" />
 
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
 
    <script src=
    </script>
</head>
 
<body>
    <div class="ui container">
        <h2 class="ui green header">
            GeeksforGeeks
        </h2>
         
        <h4>Semantic UI List Variations</h4>
        <hr />
        <br />
        <div class="ui inverted segment">
            <div class="ui inverted selection list">
                <div class="item">
                    Machine Learning
                </div>
                <div class="item">
                    Blockchain
                </div>
                <div class="item">
                    Data Science
                </div>
                <div class="item">
                    Web Development
                </div>
            </div>
        </div>
    </div>
</body>
 
</html>


Output:

Selection List

Example 4: In the below example, we have created an animated list.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI List Variations</title>
    <link href=
         rel="stylesheet" />
 
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
 
    <script src=
    </script>
</head>
 
<body>
    <div class="ui container">
        <h2 class="ui green header">
            GeeksforGeeks
        </h2>
         
        <h4>Semantic UI List Variations</h4>
        <hr />
        <br />
        <div class="ui inverted segment">
            <div class="ui inverted animated list">
                <div class="item">
                    Machine Learning
                </div>
                <div class="item">
                    Blockchain
                </div>
                <div class="item">
                    Data Science
                </div>
                <div class="item">
                    Web Development
                </div>
            </div>
        </div>
    </div>
</body>
 
</html>


Output:

Animated List

Example 5: In the below example, we have created a relaxed list.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI List Variations</title>
    <link href=
         rel="stylesheet" />
 
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
 
    <script src=
    </script>
</head>
 
<body>
    <div class="ui container">
        <h2 class="ui green header">
            GeeksforGeeks
        </h2>
         
        <h4>Semantic UI List Variations</h4>
        <hr />
        <br />
        <div class="ui inverted segment">
            <div class="ui inverted very relaxed list">
                <div class="item">
                    Machine Learning
                </div>
                <div class="item">
                    Blockchain
                </div>
                <div class="item">
                    Data Science
                </div>
                <div class="item">
                    Web Development
                </div>
            </div>
        </div>
    </div>
</body>
 
</html>


Output:

Relaxed List

Example 6: In the below example, we have created a divided list.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI List Variations</title>
    <link href=
         rel="stylesheet" />
 
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
 
    <script src=
    </script>
</head>
 
<body>
    <div class="ui container">
        <h2 class="ui green header">
            GeeksforGeeks
        </h2>
         
        <h4>Semantic UI List Variations</h4>
        <hr />
        <br />
        <div class="ui inverted segment">
            <div class="ui inverted very relaxed divided list">
                <div class="item">
                    Machine Learning
                </div>
                <div class="item">
                    Blockchain
                </div>
                <div class="item">
                    Data Science
                </div>
                <div class="item">
                    Web Development
                </div>
            </div>
        </div>
    </div>
</body>
 
</html>


Output:

Divided List

Example 7: In the below example, we have created a celled list.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI List Variations</title>
    <link href=
         rel="stylesheet" />
 
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
 
    <script src=
    </script>
</head>
 
<body>
    <div class="ui container">
        <h2 class="ui green header">
            GeeksforGeeks
        </h2>
         
        <h4>Semantic UI List Variations</h4>
        <hr />
        <br />
        <div class="ui very relaxed celled list">
            <div class="item">
                Machine Learning
            </div>
            <div class="item">
                Blockchain
            </div>
            <div class="item">
                Data Science
            </div>
            <div class="item">
                Web Development
            </div>
        </div>
    </div>
</body>
 
</html>


Output:

Celled List

Example 8: In the below example, we have created lists of various sizes.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI List Variations</title>
    <link href=
         rel="stylesheet" />
 
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
 
    <script src=
    </script>
</head>
 
<body>
    <div class="ui container">
        <h2 class="ui green header">
            GeeksforGeeks
        </h2>
         
        <h4>Semantic UI List Variations</h4>
        <hr />
        <br />
        <h5 class="ui header">Mini List</h5>
        <div class="ui inverted segment">
            <div class="ui inverted mini list">
                <div class="item">
                    Machine Learning
                </div>
                <div class="item">
                    Blockchain
                </div>
                <div class="item">
                    Data Science
                </div>
                <div class="item">
                    Web Development
                </div>
            </div>
        </div>
        <h5 class="ui header">Tiny List</h5>
        <div class="ui inverted segment">
            <div class="ui inverted tiny list">
                <div class="item">
                    Machine Learning
                </div>
                <div class="item">
                    Blockchain
                </div>
                <div class="item">
                    Data Science
                </div>
                <div class="item">
                    Web Development
                </div>
            </div>
        </div>
        <h5 class="ui header">Small List</h5>
        <div class="ui inverted segment">
            <div class="ui inverted small list">
                <div class="item">
                    Machine Learning
                </div>
                <div class="item">
                    Blockchain
                </div>
                <div class="item">
                    Data Science
                </div>
                <div class="item">
                    Web Development
                </div>
            </div>
        </div>
        <h5 class="ui header">Standard List</h5>
        <div class="ui inverted segment">
            <div class="ui inverted list">
                <div class="item">
                    Machine Learning
                </div>
                <div class="item">
                    Blockchain
                </div>
                <div class="item">
                    Data Science
                </div>
                <div class="item">
                    Web Development
                </div>
            </div>
        </div>
        <h5 class="ui header">Large List</h5>
        <div class="ui inverted segment">
            <div class="ui inverted large list">
                <div class="item">
                    Machine Learning
                </div>
                <div class="item">
                    Blockchain
                </div>
                <div class="item">
                    Data Science
                </div>
                <div class="item">
                    Web Development
                </div>
            </div>
        </div>
        <h5 class="ui header">Big List</h5>
        <div class="ui inverted segment">
            <div class="ui inverted big list">
                <div class="item">
                    Machine Learning
                </div>
                <div class="item">
                    Blockchain
                </div>
                <div class="item">
                    Data Science
                </div>
                <div class="item">
                    Web Development
                </div>
            </div>
        </div>
        <h5 class="ui header">Massive List</h5>
        <div class="ui inverted segment">
            <div class="ui inverted massive list">
                <div class="item">
                    Machine Learning
                </div>
                <div class="item">
                    Blockchain
                </div>
                <div class="item">
                    Data Science
                </div>
                <div class="item">
                    Web Development
                </div>
            </div>
        </div>
    </div>
</body>
 
</html>


Output:

List of various sizes

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!