Semantic-UI List Ordered Type

Last Updated : 22 Mar, 2022

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. An ordered list is used to group a set of related items in an orderly fashion. Semantic UI gives us a semantic UI-styled list of ordered types. Let's have a look at various list ordered type classes.

Semantic UI List Ordered Type Classes:

list: Creates a standard semantic UI list.
ordered: Groups the list in an organized manner.
item: Creates a list item.

Syntax:

<div class="ui ordered list">
  <a class="item">...</a>
  ...
</div>

Example 1: In the below example, we have created a standard semantic UI ordered list.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Semantic UI List Ordered Type</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 Ordered Type</h4>
        <hr>
        <br />
        <h3>Grocerry List</h3>
        <div class="ui ordered list">
            <a class="item">Eggs</a>
            <a class="item">Honey</a>
            <div class="item">
              <a>Vegetables</a>
              <div class="list">
                <a class="item">Onions</a>
                <a class="item">Cabbage</a>
                <a class="item">Tomatoes</a>
              </div>
            </div>
            <div class="item">
                <a>Meat</a>
                <div class="list">
                  <a class="item">Chicken</a>
                  <a class="item">Fish</a>
                </div>
            </div>
          </div>
    </div>

</body>

</html>

Output:

Example 2: In the below example, we have created a horizontal ordered list divided into cells.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Semantic UI List Ordered Type</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 Ordered Type</h4>
        <hr>
        <br />
        <h3>Grocerry List</h3>
        <div class="ui horizontal celled ordered list">
            <a class="item">Eggs</a>
            <a class="item">Honey</a>
            <div class="item">
              <a>Vegetables</a>
              <div class="list">
                <a class="item">Onions</a>
                <a class="item">Cabbage</a>
                <a class="item">Tomatoes</a>
              </div>
            </div>
            <div class="item">
                <a>Meat</a>
                <div class="list">
                  <a class="item">Chicken</a>
                  <a class="item">Fish</a>
                </div>
            </div>
          </div>
    </div>

</body>

</html>