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 Blazer UI Lists. It supports Ordered, Unordered, Unstyled, and Inline Lists.
Blaze UI Lists classes:
- c-list–ordered: This class is used to create an ordered list and provide decimal numbering to the items present in the list.
<ol class="c-list c-list--ordered">
<li class="c-list__item">...</li>
...
</ol>
- c-list: This class is used to create an unordered list and provide bullets to the list items.
<ul class="c-list ">
<li class="c-list__item">...</li>
...
</ul>
- c-list–unstyled: This class will be used to create an unstyled list that sets list style to none.
<list-type class="c-list c-list--unstyled">
<li class="c-list__item"> ...</li>
...
</list-type>
- c-list–inline: This class will act as a modifier to make list items in a single line.
<ul class="c-list c-list--inline">
<li class="c-list__item">...</li>
...
</ul>
Example 1: In this example, we will learn about ordered and unordered lists.
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet" href =
</ head >
< body >
< h1 style = "color:green" >GeeksforGeeks</ h1 >
< h3 > Blaze UI Lists </ h3 >
< p > I am Unordered list</ p >
< ul class = "c-list " >
< li class = "c-list__item" >Geeks</ li >
< li class = "c-list__item" >For</ li >
< li class = "c-list__item" >Geeks</ li >
</ ul >
< p > I am Ordered List</ p >
< ul 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 >
</ ul >
</ body >
</ html >
|
Output:
Example 2: In this example, we will learn about the unstyled and inline list.
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet" href =
</ head >
< body >
< h1 style = "color:green" >GeeksforGeeks</ h1 >
< h3 > Blaze UI Lists </ h3 >
< p > I am Inline list</ p >
< ul class = "c-list c-list--inline" >
< li class = "c-list__item" >Geeks</ li >
< li class = "c-list__item" >For</ li >
< li class = "c-list__item" >Geeks</ li >
</ ul >
< p > I am unstyled list</ p >
< ul class = "c-list c-list--unstyled" >
< li class = "c-list__item" >Geeks</ li >
< li class = "c-list__item" >For</ li >
< li class = "c-list__item" >Geeks</ li >
</ ul >
</ body >
</ html >
|
Output:
Reference: https://www.blazeui.com/components/lists/
Last Updated :
25 Apr, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...