Modules

List

This module has helpers for working with lists.

Inline #

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

  • Item 1
  • Item 2
  • Item 3
  • Item 4

<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.

  • Item 1
  • Item 2
  • Item 3
  • Item 4

<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.

  • Item 1
  • Item 2
  • Item 3
  • Item 4

<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.

  • Item 1
  • Item 2
  • Item 3
  • Item 4

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

Dashed #

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

  • Item 1
  • Item 2
  • Item 3
  • Item 4

<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.

  • Item 1
  • Item 2
  • Item 3
  • Item 4

<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.

  • News
  • Analytics
  • Shop
  • Messages
  • Blog

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

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

  • News
  • Analytics
  • Shop
  • Messages
  • Blog

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

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

  • News
  • Analytics
  • Shop
  • Messages
  • Blog

<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:

  • States

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • Colors

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • Themes

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.


<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);