Blaze UI Lists Un-styled
Last Updated :
12 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 Un-styled. Blaze UI Lists Un-styled is used to make an unstyled list i.e. removes any numbers/bullets.
Class:
- .c-list–unstyled: This class will be used to set list-style to none
Syntax:
<list-type class="c-list c-list--unstyled">
<li class="c-list__item"> list-item </li>
</list-type>
- list-type can be ordered or unordered.
We will learn more about Unordered Lists-Unstyled and Ordered Lists-Unstyled using examples.
Example 1: In this example, we will make an unstyled unordered list.
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet" href =
</ head >
< body >
< h1 style = "color:green" >GeeksforGeeks</ h1 >
< h3 > Blaze UI Lists Unstyled</ h3 >
< p > I am Unordered 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:
Example 2: In this example, we will make an unstyled ordered list.
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet" href =
</ head >
< body >
< h1 style = "color:green" >GeeksforGeeks</ h1 >
< h3 > Blaze UI Lists Unstyled</ h3 >
< p > I am Ordered unstyled list</ p >
< ol 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 >
</ ol >
</ body >
</ html >
|
Output:
Reference: https://www.blazeui.com/components/lists/
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...