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
|