List

Use list element for making lists anywhere on the page. We support different sizes and colours.

Examples

Storefront theme provides predefined stylings for two lists: unordered and ordered.

Unordered list:

• Item 1
• Item 2
• Item 3

Ordered list:

1. Item 1
2. Item 2
3. Item 3

HTML

<div class="list">
    <p class="list__title">Unordered list:</p>
    <ul class="list__content list__content_unordered">
        <li class="list__item">Item 1</li>
        <li class="list__item">Item 2</li>
        <li class="list__item">Item 3</li>
    </ul>
</div>

<div class="list">
    <p class="list__title">Ordered list:</p>
    <ol class="list__content list__content_ordered">
        <li class="list__item">Item 1</li>
        <li class="list__item">Item 2</li>
        <li class="list__item">Item 3</li>
    </ol>
</div>

List tags

The .list__content_unordered and .list__content_ordered classes were designed to be used with <ul> and <ol> elements. However, you can use them with any element. Eg. <div> or <section>. You should remeber to add appropriate attribute role="list" to the container element and role="listitem" to the item elements to tell assistive technologies such as screen readers what purpose the element serves.

Checked and error list items

Each list item may be checked or error. To make attributes checked or error add list__item_checked or list__item_error class to the <li>

Unordered list:

• Item normal
• Item error
• Item checked

HTML

<div class="list">
    <p class="list__title">Unordered list:</p>
    <ul class="list__content list__content_unordered">
        <li class="list__item">Item normal</li>
        <li class="list__item list__item_error">Item error</li>
        <li class="list__item list__item_checked">Item checked</li>
    </ul>
</div>

Usage with icons

Each list item may be used with an icon. List attributes checked and error have additional styles that modify icons as well.

Password should include:

• Small and capital letters
• At least one digit
• At least two special characters
• Other cool things that it does not have

HTML

<div class="list">
    <p class="list__title">Password should include:</p>
    <ul class="list__content list__content_unordered">
        <li class="list__item list__item_checked">
            <svg>
                <use xlink:href="https://example.com/assets/img/icons/symbol-defs.svg#icon-check"></use>
            </svg>
            Small and capital letters
        </li>
        <li class="list__item list__item_error">
            <svg>
                <use xlink:href="https://example.com/assets/img/icons/symbol-defs.svg#icon-x-circle"></use>
            </svg>
            At least one digit
        </li>
        <li class="list__item list__item_checked">
            <svg>
                <use xlink:href="https://example.com/assets/img/icons/symbol-defs.svg#icon-check"></use>
            </svg>
            At least two special characters
        </li>
        <li class="list__item list__item_error">
            <svg>
                <use xlink:href="https://example.com/assets/img/icons/symbol-defs.svg#icon-x-circle"></use>
            </svg>
            Other cool things that it does not have
        </li>
    </ul>
</div>

LESS

You can modify any list less variable in your User Less section to change list styles.

Lists variables

Variables used to style lists.

@listItemColorNeutral: @globalFontColor;
@listItemStrokeColorNeutral: @globalFontColor;

@listItemColorChecked: @globalFontColor;
@listItemStrokeColorChecked: @successColors500;

@listItemColorError: @errorColors500;
@listItemStrokeColorError: @errorColors500;

@listItemSecondaryMarginBottom: @globalSpacing * 0.5;

@listItemFontSizeInPxS: @fontSizeInPxS;
@listItemLineHeightInPxS: @lineHeightInPxS;

@listItemSecondaryFontSizeInPx: @fontSizeInPxM;
@listItemSecondaryLineHeightInPx: @lineHeightInPxM;
@listItemSecondaryColor: @globalFontColorSecondary;

@listTitleFontSizeInPxS: @fontSizeInPxS;
@listTitleLineHeightInPxS: @lineHeightInPxS;

@listItemFeatureBackgroundColor: @neutralColors100;
@listItemFeatureGap: @globalSpacing * 0.5;
@listItemFeaturePadding: @globalSpacing * 0.25;

If you want to change list styles, you can just change the variables. To change default color just modify @listItemColorNeutral variable.

@listItemColorNeutral: pink;

Lists mixins

Those mixins are used to create list variants.

.list-decorate-appearance (@color: @listItemColorNeutral, @stroke: @listItemStrokeColorNeutral) {
    color: @color;
    stroke: @stroke;
}

If you want to create important variant you can use mixins .list-decorate-appearance (You have to provide those variables)

.list {
    &__item {
        &_important {
            .list-decorate-appearance(@listItemColorImportant, @listItemStrokeColorImportant);
        }
    }
}

Lists styles

Here are standard lists styles.

.list {
    &__content {
        &_unordered {
            list-style-type: none;
        }

        &_disc {
            list-style-type: disc;
            list-style-position: inside;
        }

        &_all-lines-indent-disc {
            list-style-type: none;
            list-style-position: outside;

            > li {
                display: flex;

                &:before {
                    content: "•";
                    display: table-cell;
                    padding-right: 0.75rem
                }
            }
        }

        &_ordered {
            list-style-type: none;
            counter-reset: list;
            li::before {
                counter-increment: list;
                content: counter(list) + '. ';
            }
        }
    }

    &__title {
        .font-size(@listTitleFontSizeInPxS);
        .line-height(@listTitleLineHeightInPxS);
        .weight-semibold();
    }

    &__item {
        .font-size(@listItemFontSizeInPxS);
        .line-height(@listItemLineHeightInPxS);
        .list-decorate-appearance();

        &_error {
            .weight-semibold();
            .list-decorate-appearance(@listItemColorError, @listItemStrokeColorError);
        }

        &_checked {
            .list-decorate-appearance(@listItemColorChecked, @listItemStrokeColorChecked);
        }

        &_secondary {
            display: flex;
            align-items: center;
            justify-content: space-between;

            &:not(:last-child) {
                margin-bottom: @listItemSecondaryMarginBottom;
            }
        }

        &_secondary {
            .font-size(@listItemSecondaryFontSizeInPx);
            .line-height(@listItemSecondaryLineHeightInPx);
            .list-decorate-appearance(@listItemSecondaryColor, @listItemSecondaryColor);

            &:not(:last-child) {
                margin-bottom: 0;
            }
        }
    }

    &__item_feature {
        display: flex;
        column-gap: @listItemFeatureGap;
        padding: @listItemFeaturePadding;

        &:nth-child(odd) {
            background-color: @listItemFeatureBackgroundColor;
        }
    }

    &__feature-item {
        &-label {
            flex: 0 1 50%;
            text-align: right;
        }

        &-value {
            flex: 1 0 50%;
        }
    }
}