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