Pastel UI

Lists

Lists are flexible and powerful component for displaying a series of content.


Basic Lists

The most basic list is an unordered list with list items and proper classes on it.

You can get a basic list by using the list class on the ul tag and list-item class alongside the basic class on your list item tags.

  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4
  • List Item 5
  • List Item 6

Stacked Lists

Stacked Lists are a collection of items with spaces in between each item.

You can make use of stacked lists by using the list-stacked class alongside the list class on the ul tag and stacked class alongside the list-item class on the li tag.

  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4
  • List Item 5
  • List Item 6

Active Lists

You can make a list item as active by using the active class on any list item alongside any of the above mentioned list types.

  • List Item 1
  • List Item 2
  • List Item 3

Notification List

Notifications

  • Recent tweet from ABC just now
  • PQR and XYZ liked your reply 25 mins ago
  • LMN followed you 30th Jan