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.
<!DOCTYPE html> <html>
<head>
<title>Semantic UI List Ordered Type</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 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.
<!DOCTYPE html> <html>
<head>
<title>Semantic UI List Ordered Type</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 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>
|
Output:
Horizontal ordered list divided into cells
References: https://semantic-ui.com/elements/list.html#ordered