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 =
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.
HTML
<!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
Share your thoughts in the comments
Please Login to comment...