@miraidesigns/list v1.0.1

Lists

Lists allow you to display a number of connected items, usually one below the other.

HTML

<ul class="mdf-list">
    <li class="mdf-list__item">
        <span class="mdf-list__text">List item</span>
    </li>

    <li class="mdf-list__item">
        <span class="mdf-list__text">List item</span>
    </li>

    <li class="mdf-list__item">
        <span class="mdf-list__text">List item</span>
    </li>
</ul>

Sass

// Include default styles without configuration
@forward '@miraidesigns/list/styles';

// Configure appearance
@use '@miraidesigns/list' with (
    $variable: value
);

@include list.styles();

Examples

Some basic examples on how the module can be used.

Icons

Add leading or trailing icons to your list items.

<ul class="mdf-list">
    <li class="mdf-list__item">
        <!-- Leading icon -->
        <span class="mdf-list__leading">
            <svg class="mdf-icon" viewBox="0 0 24 24" aria-hidden="true">
                <use href="icons.svg#favorite"></use>
            </svg>
        </span>

        <span class="mdf-list__text">List item</span>

        <!-- Trailing icon -->
        <span class="mdf-list__trailing">
            <svg class="mdf-icon" viewBox="0 0 24 24" aria-hidden="true">
                <use href="icons.svg#more"></use>
            </svg>
        </span>
    </li>
</ul>

Two lines

Two lines can be used to offer a small description for the larger primary text.

<ul class="mdf-list">
    <li class="mdf-list__item mdf-list__item--two-lines">
        <span class="mdf-list__text">
            <span class="mdf-list__primary-text">List item</span>
            <span class="mdf-list__secondary-text">Description text</span>
        </span>
    </li>
</ul>

Implementation

Classes