Blaze UI Lists Un-styled
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 = "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" > </ head > < body > < h1 style = "color:green" >w3wiki</ 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" >Beginner</ li > < li class = "c-list__item" >For</ li > < li class = "c-list__item" >Beginner</ 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 = "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" > </ head > < body > < h1 style = "color:green" >w3wiki</ 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" >Beginner</ li > < li class = "c-list__item" >For</ li > < li class = "c-list__item" >Beginner</ li > </ ol > </ body > </ html > |
Output:
Reference: https://www.blazeui.com/components/lists/