Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Semantic-UI | List

  • Last Updated : 11 May, 2020

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. The list is used to show group related data that the data under the same type.

Below all the list examples are given.

Example 1: In this example, we will see some basic types of list using Semantic-ui.




<!DOCTYPE html>
<html>
    <head>
        <title>Semantic UI</title>
        <link href=
              rel="stylesheet" />
    </head>
    <body>
        <div class="ui container">
            <h2>JS libraries</h2>
            <div class="ui list">
                <div class="item">React</div>
                <div class="item">Lodash</div>
                <div class="item">Request</div>
            </div>
        </div>
        <script src=
        </script>
    </body>
</html>

Output:

Example 2: In this example, we will divide List with icons.






<!DOCTYPE html>
<html>
    <head>
        <title>Semantic UI</title>
        <link href=
              rel="stylesheet" />
    </head>
    <body>
        <div class="ui container">
            <h2>Notifications</h2>
            <div class="ui relaxed divided list">
                <div class="item">
                    <i class="small world middle aligned icon"></i>
                    <div class="content">
                        <a class="header">
                           Geeksforgeeks liked your post
                        </a>
                        <div class="description">20 mins ago</div>
                    </div>
                </div>
                <div class="item">
                    <i class="small world middle aligned icon"></i>
                    <div class="content">
                        <a class="header">
                          Geeksforgeeks added you as an Intern
                        </a>
                        <div class="description">22 mins ago</div>
                    </div>
                </div>
                <div class="item">
                    <i class="small world middle aligned icon"></i>
                    <div class="content">
                        <a class="header">
                          Geeksforgeeks accepted your Request
                        </a>
                        <div class="description">1 hour ago</div>
                    </div>
                </div>
            </div>
        </div>
        <script src=
        </script>
    </body>
</html>

Output

Example 3: In this example, we will see List for Personal Detail.




<!DOCTYPE html>
<html>
    <head>
        <title>Semantic UI</title>
        <link href=
              rel="stylesheet" />
    </head>
    <body>
        <div class="ui container">
            <h2>Geeksforgeeks</h2>
            <div class="ui list">
                <div class="item">
                    <i class="computer icon"></i>
                    <div class="content">
                        Geeksforgeeks
                    </div>
                </div>
                <div class="item">
                    <i class="marker icon"></i>
                    <div class="content">
                        Noida, UP
                    </div>
                </div>
                <div class="item">
                    <i class="mail icon"></i>
                    <div class="content">
                        <a href=
"mailto:carrier@geeksforgees.org">
                           carrier@geeksforgeeks.org
                        </a>
                    </div>
                </div>
                <div class="item">
                    <i class="linkify icon"></i>
                    <div class="content">
                        <a href=
"https://geeksforgeeks.org">geeksforgeeks.org</a>
                    </div>
                </div>
            </div>
        </div>
        <script src=
        </script>
    </body>
</html>

Output

Example 4: In this example, we will see Bulleted List.




<!DOCTYPE html>
<html>
    <head>
        <title>Semantic UI</title>
        <link href=
              rel="stylesheet" />
    </head>
    <body>
        <div class="ui container">
            <h2>JavaScript Uses</h2>
            <ul>
                <li>Web</li>
                <li>Mobile App</li>
                <li>Desktop App</li>
                <li>
                    Frameworks
                    <ul>
                        <li>ReactJS</li>
                        <li>NodeJS</li>
                        <li>AngularJS</li>
                    </ul>
                </li>
            </ul>
        </div>
        <script src=
        </script>
    </body>
</html>

Output

Example 5: In this example, we will create ordered List.




<!DOCTYPE html>
<html>
    <head>
        <title>Semantic UI</title>
        <link href=
              rel="stylesheet" />
    </head>
    <body>
        <div class="ui container">
            <h2>JavaScript Uses</h2>
            <ol class="ui list">
                <li>Web</li>
                <li>Mobile App</li>
                <li>Desktop App</li>
                <li>
                    Frameworks
                    <ol>
                        <li>ReactJS</li>
                        <li>NodeJS</li>
                        <li>AngularJS</li>
                    </ol>
                </li>
            </ol>
        </div>
        <script src=
        </script>
    </body>
</html>

Output

Example 6: In this example, we will create list with icons.






<!DOCTYPE html>
<html>
    <head>
        <title>Semantic UI</title>
        <link href=
              rel="stylesheet" />
    </head>
    <body>
        <div class="ui container">
            <h2>Semantic-UI Icons</h2>
            <div class="ui list">
                <a class="item">
                    <i class="users icon"></i>
                    <div class="content">
                        <div class="header">Users Icon</div>
                        <div class="description">
                          This icon you can use for Users, Friends,
                          Friends of Friends.
                        </div>
                    </div>
                </a>
                <a class="item">
                    <i class="world icon"></i>
                    <div class="content">
                        <div class="header">World Icon</div>
                        <div class="description">
                         This icon you can use for globe, 
                         notification and many more.
                        </div>
                    </div>
                </a>
                <div class="item">
                    <i class="facebook icon"></i>
                    <div class="content">
                        <div class="header">facebook Icon</div>
                        <div class="description">
                         This can be used for facebook Social Link
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src=
        </script>
    </body>
</html>

Output

Example 7: In this example, we will create list with images.




<!DOCTYPE html>
<html>
    <head>
        <title>Semantic UI</title>
        <link href=
              rel="stylesheet" />
    </head>
    <body>
        <div class="ui container">
            <h2>List with Images</h2>
            <div class="ui 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
                        </div>
                    </div>
                </div>
                <div class="item">
                    <img class="ui avatar image" src=
                    <div class="content">
                        <a class="header">geeksforgeeks</a>
                        <div class="description">
                         A Computer Science Portal
                        </div>
                    </div>
                </div>
                <div class="item">
                    <img class="ui avatar image" src=
                    <div class="content">
                        <a class="header">geeksforgeeks</a>
                        <div class="description">
                         A computer Science portal
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src=
        </script>
    </body>
</html>

Output

Example 8: In this example, we will create description List.




<!DOCTYPE html>
<html>
    <head>
        <title>Semantic UI</title>
        <link href=
              rel="stylesheet" />
    </head>
    <body>
        <div class="ui container">
            <h2>Description List</h2>
            <div class="ui list">
                <div class="item">
                    <i class="map computer icon"></i>
                    <div class="content">
                        <a class="header">Geeksforgeeks</a>
                        <div class="description">
                          Learn anything related to Computer Science 
                        </div>
                    </div>
                </div>
                <div class="item">
                    <i class="map computer icon"></i>
                    <div class="content">
                        <a class="header">Internshala</a>
                        <div class="description"
                         Earn while you study
                        </div>
                    </div>
                </div>
                <div class="item">
                    <i class="map computer icon"></i>
                    <div class="content">
                        <a class="header">Hacker Rank</a>
                        <div class="description">
                         Test your coding skills.
                       </div>
                    </div>
                </div>
            </div>
        </div>
        <script src=
        </script>
    </body>
</html>

Output

Example 9: In this example, we will create floated List.




<!DOCTYPE html>
<html>
    <head>
        <title>Semantic UI</title>
        <link href=
              rel="stylesheet" />
    </head>
    <body>
        <div class="ui container">
            <h2>Floated List</h2>
            <div class="ui middle aligned divided list">
                <div class="item">
                    <div class="right floated content">
                        <div class="ui button">Delete</div>
                    </div>
                    <i class="basketball ball icon"></i>
                    <div class="content">
                        Basket Ball
                    </div>
                </div>
                <div class="item">
                    <div class="right floated content">
                        <div class="ui button">Delete</div>
                    </div>
                    <i class="hockey puck icon"></i>
                    <div class="content">
                        Hockey
                    </div>
                </div>
                <div class="item">
                    <div class="right floated content">
                        <div class="ui button">Delete</div>
                    </div>
                    <i class="table tennis icon"></i>
                    <div class="content">
                        Table Tennis
                    </div>
                </div>
            </div>
        </div>
        <script src=
        </script>
    </body>
</html>

Output




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!