Open In App

Semantic-UI List Variations

Last Updated : 25 Mar, 2022
Comments
Improve
Suggest changes
Like Article
Like
Report

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=
"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"
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>

    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </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=
"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"
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
        crossorigin="anonymous">
    </script>

    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </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=
"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"
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>

    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </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=
"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"
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>

    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </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=
"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"
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>

    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </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=
"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"
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>

    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </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=
"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"
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
        crossorigin="anonymous">
    </script>

    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </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=
"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"
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
        crossorigin="anonymous">
    </script>

    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </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


Next Article
Semantic-UI List Content Variations
author
coder_srinivas
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox