Lists
Lists as they indicate themselves, are used to display list of similar items. They can be normal lists with bullet points, without any bullet points or stacked lists as seen in notifications tabs across many social media apps.
Normal Lists
To use the normal list, use
.list class on the list and
.list-item on the list items
-
This is a list item
-
This is a list item
-
This is a list item
- This is a list item
- This is a list item
- This is a list item
Bullet-less Lists
These lists don't have any bullet points. They are used for wide
range of things, like displaying list of todos in a todolist app or
news articles in a news website. To use
.list and
.style-none class on the list and
.list-item on the list items
-
This is a list item
-
This is a list item
-
This is a list item
- This is a list item
- This is a list item
- This is a list item
Spaced Horizontal Lists
These lists are flexed horizontally and don't have bullet points for
list items. Use the class
.list-hz and
.style-none class on the list and
.list-item on the list items
-
This is a list item
-
This is a list item
-
This is a list item
- This is a list item
- This is a list item
- This is a list item
Stacked Lists
Best example of these lists is a notifications tab in any app. To
use
.list and
.style-none class on the list and
.list-item on the list items
-
Dummy notification lorem ipsum do el set
-
Dummy notification lorem ipsum do el set
-
Dummy notification lorem ipsum do el set
-
Dummy notification lorem ipsum do el set
-
Dummy notification lorem ipsum do el set
-
Dummy notification lorem ipsum do el set