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.
Example 2: In this example, we will learn about the unstyled and inline list.