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:

Standard List of ordered type

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>