List

Inline #

Use the list-inline class to place the list items in one line.

<ul class="list-inline">
    <li>...</li>
</ul>

Unstyled #

Use the list-unstyled class to drop the left margin of the list and turn off the markers from the list.

<ul class="list-unstyled">
    <li>...</li>
</ul>

You can also wrap the list in a nav tag to turn off the list style.

<nav>
    <ul>
        <li>...</li>
    </ul>
</nav>

Checkmark #

Use the list-checkmark to make the list items with a check mark.

<ul class="list-checkmark">
    <li>...</li>
</ul>

You can change the color of the check mark. To do this, first add a color to $colors. See also how to work with colors for modules.

// =Colors
$colors: map-extend($colors, (
    list: (
        checkmark: (
            positive: palette(positive, base)
        )
    )
));

Now add a new list modifier and color to your SCSS.

.list-checkmark-positive li:before {
    color: color(list, checkmark, positive);
}

As a result, the list-checkmark-positive class will change the color of check marks.

<ul class="list-checkmark list-checkmark-positive">
    <li>...</li>
</ul>

Dashed #

Use the list-dashed to make the list items with a dashed mark.

<ul class="list-dashed">
    <li>...</li>
</ul>

You can change the color of the dash. To do this, first add a color to $colors. See also how to work with colors for modules.

// =Colors
$colors: map-extend($colors, (
    list: (
        dashed: (
            important: palette(negative, base)
        )
    )
));

Now add a new list modifier and color to your SCSS.

.list-dashed-important li:before {
    color: color(list, dashed, important);
}

As a result, the list-dashed-important class will change the color of check marks.

<ul class="list-dashed list-dashed-important">
    <li>...</li>
</ul>

Variants #

The list modifier makes it possible to output a list with a padding inside the items.

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

The list-stacked modifier adds a line between the list items.

<ul class="list list-stacked">
    <li class="list-item">...</li>
</ul>

The list-bordered modifier adds a border around the list.

<ul class="list list-stacked list-bordered">
    <li class="list-item">...</li>
</ul>

Fun with lists #

Using various list modifiers and other modules, you can build beautiful lists with icons like this:

<ul class="list-unstyled stack stack-4">
    <li class="list-item flex">
        <div class="list-icon mr-4">
            <span class="bg-aluminum icon-box-32 r-circle">
                <svg ...>
            </span>
        </div>
        <div class="list-content">
            <div class="list-head">
                <h4>...</h4>
            </div>
            <div class="list-body">
                <p>...</p>
            </div>
        </div>
    </li>
</ul>