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, change the mark color variable in your custom SCSS. See also how to customize the framework.

.list-checkmark-positive {
    --list-mark-color: var(--palette-positive-base);
}

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, change the mark color variable in your custom SCSS. See also how to customize the framework.

.list-dashed-important {
    --list-mark-color: var(--palette-negative-base);
}

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>

The list-numbered modifier adds numbers before the list item.

<ul class="list list-numbered">
    <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>

Variables #

The default properties and colors of the module are shown below. These are all specified in the source of framework. This is here for clarity and to simplify modification and overriding of values.

// list
--list-font-size: var(--type-scale-15);
--list-line-height: 1.3;
--list-item-padding-y: 6px;
--list-item-padding-x: 0;
--list-item-color: var(--text-default);

// list-checkmark & list-dashed
--list-mark-color: var(--text-default);

// list-stacked
--list-item-padding-y: 8px;
--list-item-border-width: 1px;
--list-item-border-style: solid;
--list-item-border-color: var(--palette-black-7);

// list-bordered
--list-border-width: 1px;
--list-border-style: solid;
--list-border-radius: var(--radius-base);
--list-border-color: var(--palette-black-7);
--list-item-padding-y: 6px;
--list-item-padding-x: 12px;
--list-item-space: 1px;

// list-numbered
--list-number-font-size: 80%;
--list-number-width: 24px;
--list-number-color: var(--palette-black-60);

// list-list
--list-item-color: var(--text-light);