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>

Use the list-strong modifier to make the list text bold.

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

Use the list-semibold modifier to make the list text semibold.

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

Use the list-light modifier on the dark backgrounds.

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

Variables #

Here are the CSS variables used in the module. Setting them allows you to change the appearance and parameters of the module.

// =List
// colors
--list-item-color: var(--text-default);

// params
--list-font-size: 15px;
--list-line-height: 1.3;
--list-item-space: 0;
--list-item-padding-y: 6px;
--list-item-padding-x: 0;
--list-item-font-weight: normal;

// =ListCheckmark & ListDashed
--list-mark-color: var(--text-default);

// =ListNumbered
// colors
--list-number-color: var(--palette-black-60);

// params
--list-number-font-size: 80%;
--list-number-width: 22px;