Blaze UI Lists Ordered
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 = "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" > </ head > < body > < h1 style = "color:green" >w3wiki</ h1 > < h3 > Blaze UI List Ordered</ h3 > < ol class = "c-list c-list--ordered" > < li class = "c-list__item" >Beginner</ li > < li class = "c-list__item" >For</ li > < li class = "c-list__item" >Beginner</ 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 = "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" > </ head > < body > < h1 style = "color:green" >w3wiki</ 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/
Contact Us