Elixir Docs

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.

<ul class="list list-spaced m-1">
    <p class="list-head text text-lg mb-0-5">Navigation</p>
    
    <li class="list-item">Home</li>
        
    <li class="list-item">About</li>
        
    <li class="list-item">Products</li>
        
    <li class="list-item">Contact</li>
</ul>

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.

<ul class="list list-stacked list-style-none m-1">
    <p class="list-head text text-lg p-0-75">Notifications</p>
    
    <li class="list-item p-1">
        Anonymous followed you back.
    </li>
    
    <li class="list-item p-1">
        John Doe commented on your post.
    </li>
    
    <li class="list-item p-1">
        Jane doe has their birthday today. Wish them well. 
    </li>
                                
    <li class="list-item p-1">
        You have a memory with xyz.
    </li>  
</ul>

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.

<ul class="list list-inline list-style-none m-1">
    <li class="list-item mx-0-25">
        <a href="#" class="btn btn-link btn-primary">Home</a>
    </li>
    
    <li class="list-item mx-0-5">
        <a href="#" class="btn btn-link btn-primary">About</a>
    </li>
                                
    <li class="list-item mx-0-5">
        <a href="#" class="btn btn-link btn-primary">Contact</a>
    </li>
</ul>