Blaze UI Lists
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 = "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" > </ head > < body > < h1 style = "color:green" >w3wiki</ h1 > < h3 > Blaze UI Lists </ h3 > < p > I am Unordered list</ p > < ul class = "c-list " > < li class = "c-list__item" >Beginner</ li > < li class = "c-list__item" >For</ li > < li class = "c-list__item" >Beginner</ li > </ ul > < p > I am Ordered List</ p > < ul 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 > </ 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 = "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" > </ head > < body > < h1 style = "color:green" >w3wiki</ h1 > < h3 > Blaze UI Lists </ h3 > < p > I am Inline list</ p > < ul class = "c-list c-list--inline" > < li class = "c-list__item" >Beginner</ li > < li class = "c-list__item" >For</ li > < li class = "c-list__item" >Beginner</ li > </ ul > < p > I am 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:
Reference: https://www.blazeui.com/components/lists/
Contact Us