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...