@miraidesigns/list

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

Name	Type	Description
mdf-list	Parent	Contains the list items
mdf-list--add-dividers	Modifier	Add dividers to the bottom of every list item
mdf-list--condensed	Modifier	Reduce the height of all list items
mdf-list__item	Parent / Child	List item, contains the item's text elements. Child to .mdf-list
mdf-list__item--disabled	Modifier	Grey out the list item, stops all interaction
mdf-list__item--two-lines	Modifier	Increase the height of list items to allow for two text lines
mdf-list__leading	Child	Leading element (left side of the text). Child to .mdf-list__item
mdf-list__trailing	Child	Trailing element (right side of the text). Child to .mdf-list__item
mdf-list__text	Parent / Child	List item text element. Child to .mdf-list__item
mdf-list__primary-text	Child	Primary text of two-line list items. Child to .mdf-list__text
mdf-list__secondary-text	Child	Secondary text of two-line list items. Child to .mdf-list__text