Lists

List is a component that displays collection of information vertically or horizontally.

Elixir offers the following type of lists - Spaced List, Stacked List, and Inline List

Spaced List

This is the default or basic list that displays data vertically with some space in between.

To generate a spaced list, use the base class list along with the supporing class list-spaced.

    Navigation

  • Home
  • About
  • Products
  • Contact

Copy the code below to use a spaced list.

Stacked List

This is a variation of list component where the items are stacked vertically without any bullets.

To generate a stacked list, use the base class list along with the supporting stacked-list. Add the class list-style-none to remove list item bullets.

    Notifications

  • Anonymous followed you back.
  • John Doe commented on your post.
  • Jane doe has their birthday today. Wish them well.
  • You have a memory with xyz.

Copy the code below to use stacked list.

Inline List

This is a variation of list component where the items are stacked horizontally without any bullets.

To generate an inline list, use the base class list along with the supporting list-inline. Add the class list-style-none to remove list item bullets.

Copy the code below to use inline list.