Blaze UI Lists Ordered
Last Updated :
28 Apr, 2022
Blaze UI is a free open source UI Toolkit that provides a great structure for building websites quickly with a scalable and maintainable foundation. All components in Blaze UI are developed mobile-first and rely solely on native browser features, not a separate library or framework. It helps us to create a scalable and responsive website fast and efficiently with a consistent style.
In this article, we will learn about Blaze UI Lists Ordered. Blaze UI Lists Ordered is used to provide numbering to the list.
Lists Ordered Class:
- c-list–ordered: This class is used to provide decimal numbering to the items present in the list.
Syntax:
<ol class="c-list c-list--ordered">
<li class="c-list__item">List Item</li>
</ol>
Example 1: In this example, we will simply create an ordered list.
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet" href =
</ head >
< body >
< h1 style = "color:green" >GeeksforGeeks</ h1 >
< h3 > Blaze UI List Ordered</ h3 >
< ol class = "c-list c-list--ordered" >
< li class = "c-list__item" >Geeks</ li >
< li class = "c-list__item" >For</ li >
< li class = "c-list__item" >Geeks</ li >
</ ol >
</ body >
</ html >
|
Output:
Example 2: In this example, we will create a nested ordered list
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet" href =
</ head >
< body >
< h1 style = "color:green" >GeeksforGeeks</ h1 >
< h3 > Blaze UI List Ordered</ h3 >
< ol class = "c-list c-list--ordered" >
< li class = "c-list__item" >Fruits
< ol class = "c-list c-list--ordered" >
< li class = "c-list__item" >Mango</ li >
< li class = "c-list__item" >Banana</ li >
< li class = "c-list__item" >Orange</ li >
< li class = "c-list__item" >Apple</ li >
</ ol >
</ li >
< li class = "c-list__item" >Vegetables
< ol class = "c-list c-list--ordered" >
< li class = "c-list__item" >Potato</ li >
< li class = "c-list__item" >Tomato</ li >
< li class = "c-list__item" >Ladyfinger</ li >
< li class = "c-list__item" >Onion</ li >
</ ol >
</ li >
</ ol >
</ body >
</ html >
|
Output:
Reference: https://www.blazeui.com/components/lists/
Share your thoughts in the comments
Please Login to comment...