Semantic-UI List Ordered Type
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" >w3wiki</ 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" >w3wiki</ 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:
References: https://semantic-ui.com/elements/list.html#ordered