List

Usage

A list is a way of portraying similar data in an orderly fashion. List items should be wrapped in a <ul> element with a list class attached to it.
Each <li> or <a> tag within the list should have a list-item class attached to it, see below:

• List item
• List item
• List item
• List item
• List item

<ul class="list">
    <li class="list-item">List item</li>
    <li class="list-item">List item</li>
    <li class="list-item">List item</li>
    <li class="list-item">List item</li>
    <li class="list-item">List item</li>
</ul>

Active

In order to display a colored background on one of the list items, simply add the active class

• List item
• List item
• List item
• List item
• List item

<ul class="list">
    <li class="list-item active">List item</li>
    <li class="list-item">List item</li>
    <li class="list-item">List item</li>
    <li class="list-item">List item</li>
    <li class="list-item">List item</li>
</ul>

Disabled

To make a list item disabled, add the disabled class, which will slightly mute the color of the text.

• List item
• List item
• List item
• List item
• List item

<ul class="list">
    <li class="list-item disabled">List item</li>
    <li class="list-item">List item</li>
    <li class="list-item">List item</li>
    <li class="list-item">List item</li>
    <li class="list-item">List item</li>
</ul>

Link

Instead of using <li> tags you can also use a links. Which will add a display: block; property to stack them vertically.

List item List item List item List item List item

<ul class="list">
    <a href="#!" class="list-item">List item</a>
    <a href="#!" class="list-item active">List item</a>
    <a href="#!" class="list-item">List item</a>
    <a href="#!" class="list-item">List item</a>
    <a href="#!" class="list-item">List item</a>
</ul>

Icon

Icons can also be used in conjunction with a list-item element. Simply add the list-icon class, which will add the display: flex; property.

List item List item List item List item List item

<ul class="list">
    <a href="#!" class="list-item list-icon">
        List item
        <i class="fas fa-caret-right fa-lg"></i>
    </a>                        
    <a href="#!" class="list-item list-icon active">
        List item
        <i class="fas fa-caret-right fa-lg"></i>
    </a>
    <a href="#!" class="list-item list-icon">
        List item
        <i class="fas fa-caret-right fa-lg"></i>
    </a>                        
    <a href="#!" class="list-item list-icon">
        List item
        <i class="fas fa-caret-right fa-lg"></i>
    </a>
    <a href="#!" class="list-item list-icon">
        List item
        <i class="fas fa-caret-right fa-lg"></i>
    </a>                        
</ul>

Badge

Use the mesh badges to create notifications within the list. Use the list-icon class and add the badge.
Note: you may need to add our color utility classes to achieve the right appearance, see below:

List item
2
List item
4
List item
14

<ul class="list">
    <a href="#!" class="list-item list-icon">
        List item
        <div class="badge badge-primary badge-rounded">2</div>
    </a>                        
    <a href="#!" class="list-item list-icon active">
        List item
        <div class="badge badge-primary badge-rounded bg-white c-primary">4</div>
    </a>
    <a href="#!" class="list-item list-icon">
        List item
        <div class="badge badge-primary badge-rounded">14</div>
    </a>                        
</ul>

Full monty

The possibilities are endless, here is taster of what you can achieve with our list component.

List item heading

Posted 2 days ago

Kogi single-origin coffee farm-to-table letterpress keffiyeh heirloom. Helvetica cold-pressed readymade meggings, echo park retro sartorial. +1 wolf subway tile, quinoa heirloom live-edge ethical letterpress blog kale chips vape pok pok butcher. Everyday carry kombucha gochujang VHS, poke man braid copper mug asymmetrical cronut. Man braid viral fashion axe thundercats try-hard church-key literally quinoa.

Posted by Tiger Woods

List item heading

Posted 5 days ago

Kogi single-origin coffee farm-to-table letterpress keffiyeh heirloom. Helvetica cold-pressed readymade meggings, echo park retro sartorial. +1 wolf subway tile, quinoa heirloom live-edge ethical letterpress blog kale chips vape pok pok butcher. Everyday carry kombucha gochujang VHS, poke man braid copper mug asymmetrical cronut. Man braid viral fashion axe thundercats try-hard church-key literally quinoa.

Posted by Gordon Ramsey

List item heading

Posted 10 days ago

Kogi single-origin coffee farm-to-table letterpress keffiyeh heirloom. Helvetica cold-pressed readymade meggings, echo park retro sartorial. +1 wolf subway tile, quinoa heirloom live-edge ethical letterpress blog kale chips vape pok pok butcher. Everyday carry kombucha gochujang VHS, poke man braid copper mug asymmetrical cronut. Man braid viral fashion axe thundercats try-hard church-key literally quinoa.

Posted by Above & Beyond

<ul class="list w-100 w-tab-60">
    <a href="#!" class="list-item w-100 c-dark">
        <div class="d-flex justify-content-between align-items-center my-2">
            <h3 class="mb-0">List item heading</h3>
            <div class="badge badge-primary">Posted 2 days ago</div>
        </div>
        <p>Kogi single-origin coffee farm-to-table...</p>
        <h6>Posted by Tiger Woods</h6>
    </a>                        
    <a href="#!" class="list-item active">
        <div class="d-flex justify-content-between align-items-center my-2">
            <h3 class="mb-0">List item heading</h3>
            <div class="badge badge-white">Posted 5 days ago</div>
        </div>
        <p>Kogi single-origin coffee farm-to-table...</p>
        <h6>Posted by Gordon Ramsey</h6>
    </a> 
    <a href="#!" class="list-item w-100 c-dark">
        <div class="d-flex justify-content-between align-items-center my-2">
            <h3 class="mb-0">List item heading</h3>
            <div class="badge badge-primary">Posted 10 days ago</div>
        </div>
        <p>Kogi single-origin coffee farm-to-table...</p>
        <h6>Posted by Above & Beyond</h6>
    </a>                       
</ul>

Variables

Change border colors, active colors and disabled with the variables below.

$list-background-color: #fff;

$list-border-color: #ddd;

$list-active-color: color('primary');

$list-disabled-color: #999;