List navigation

A list navigation makes data structures navigable.

List navigation, basic example

<div class="listNavigation">
    <div class="listNavigation__lists">
        <div class="listNavigation__header">
            Very simple List navigation
        </div>
        <ul class="listNavigation__list">
            <li class="list__item">
                <a href="#" class="item__link">
                    <div class="item__icon">
                        <span class="iconMdsp person" aria-hidden="true"></span>
                    </div>
                    <div class="item__content">
                        <h4 class="label">List item A</h4>
                        <div class="description">This is a list item. There is a status set to indicate something important.</div>
                    </div>
                    <div class="item__metaInfo">
                        <span class="iconMdsp star has-color-accentTealDark" aria-hidden="true"></span>
                    </div>
                </a>
            </li>
            <li class="list__item">
                <a href="#" class="item__link">
                    <div class="item__icon">
                        <span class="iconMdsp person" aria-hidden="true"></span>
                    </div>
                    <div class="item__content">
                        <h4 class="label">List item A</h4>
                        <div class="description">This is a list item and there is a status set to indicate something important.</div>
                    </div>
                    <div class="item__metaInfo">
                        <span class="iconMdsp exclamationDiamond black has-color-functionalYellow" aria-hidden="true"></span>
                    </div>
                </a>
            </li>
            <li class="list__item">
                <a href="#" class="item__link">
                    <div class="item__content">
                        <h4 class="label">List item A</h4>
                        <div class="description">This is a list item. There is no icon or status indicator set.</div>
                    </div>
                </a>
            </li>
            <li class="list__item">
                <a href="#" class="item__link">
                    <div class="item__content">
                        <h4 class="label">List item A</h4>
                        <div class="description">This is a list item. There is no icon or status indicator set.</div>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</div>

List navigation, states and variants

List navigation header, different variants and combinations of list items and states
<div class="listNavigation">
    <div class="listNavigation__lists">
        <div class="listNavigation__header">
            List navigation header, different variants and combinations of list items and states
        </div>
        <ul class="listNavigation__list">
            <li class="list__item">
                <a href="#" class="item__link">
                    <div class="item__icon">
                        <span class="iconMdsp person" aria-hidden="true"></span>
                    </div>
                    <div class="item__content">
                        <h4 class="label">List item A</h4>
                        <div class="description">This is a list item. There is a status set to indicate something important.</div>
                    </div>
                    <div class="item__metaInfo">
                        <span class="iconMdsp exclamationDiamond black has-color-functionalYellow" aria-hidden="true"></span>
                    </div>
                </a>
            </li>
            <li class="list__item">
                <a href="#" class="item__link">
                    <div class="item__icon">
                        <span class="iconMdsp person" aria-hidden="true"></span>
                    </div>
                    <div class="item__content">
                        <h4 class="label">List item A</h4>
                        <div class="description">This is a list item and there is a status set to indicate something important.</div>
                    </div>
                    <div class="item__metaInfo">
                        <span class="iconMdsp exclamationDiamond black has-color-functionalYellow" aria-hidden="true"></span>
                    </div>
                </a>
            </li>
            <li class="list__item list__item--oneLine">
                <a href="#" class="item__link">
                    <div class="item__content">
                        <h4 class="label">List item one line</h4>
                        <div class="description">This is a one line list item with some descriptional text.</div>
                    </div>
                    <div class="item__metaInfo">
                    </div>
                </a>
            </li>
            <li class="list__item list__item--twoLine">
                <a href="#" class="item__link">
                    <div class="item__content">
                        <h4 class="label">List item two line</h4>
                        <div class="description">This is a two line list item with some descriptional text. Curabitur aliquet ac ante vel rhoncus. Aliquam mauris nisl, rutrum quis sem aliquam. Morbi enim nisi, pretium ac felis vitae, luctus molestie elit. </div>
                    </div>
                    <div class="item__metaInfo">
                    </div>
                </a>
            </li>
            <li class="list__item list__item--threeLine">
                <a href="#" class="item__link">
                    <div class="item__content">
                        <h4 class="label">List item three line</h4>
                        <div class="description">This is a one line list item with some descriptional text. Nulla facilisi. Integer nec tincidunt orci. Maecenas semper rutrum massa sit amet hendrerit. Curabitur aliquet ac ante vel rhoncus. Aliquam mauris nisl, rutrum quis sem aliquam. Donec euismod, nibh a ultricies fermentum, justo erat tincidunt quam.</div>
                    </div>
                    <div class="item__metaInfo">
                    </div>
                </a>
            </li>
            <li class="list__item list__item--twoLine has-overflowIndicator">
                <a href="#" class="item__link">
                    <div class="item__content">
                        <h4 class="label">List item two line with overflow indicator</h4>
                        <div class="description">This is a two line list item with some descriptional text. Curabitur aliquet ac ante vel rhoncus. Aliquam mauris nisl, rutrum quis sem aliquam. Morbi enim nisi, pretium ac felis vitae, luctus molestie elit. </div>
                    </div>
                    <div class="item__metaInfo">
                    </div>
                </a>
            </li>
            <li class="list__item list__item--threeLine has-overflowIndicator">
                <a href="#" class="item__link">
                    <div class="item__content">
                        <h4 class="label">List item three line with overflow indicator</h4>
                        <div class="description">This is a one line list item with some descriptional text. Nulla facilisi. Integer nec tincidunt orci. Maecenas semper rutrum massa sit amet hendrerit. Curabitur aliquet ac ante vel rhoncus. Aliquam mauris nisl, rutrum quis sem aliquam. Donec euismod, nibh a ultricies fermentum, justo erat tincidunt quam.</div>
                    </div>
                    <div class="item__metaInfo">
                        <span class="iconMdsp star" aria-hidden="true"></span>
                    </div>
                </a>
            </li>
            <li class="list__item">
                <a href="#" class="item__link is-disabled">
                    <div class="item__icon">
                        <span class="iconMdsp person" aria-hidden="true"></span>
                    </div>
                    <div class="item__content">
                        <h4 class="label">List item, disabled</h4>
                        <div class="description">This is a list item. There is a status set to indicate something important.</div>
                    </div>
                    <div class="item__metaInfo">
                        <span class="iconMdsp exclamationDiamond black has-color-functionalYellow" aria-hidden="true"></span>
                    </div>
                </a>
            </li>
            <li class="list__item">
                <a href="#" class="item__link is-current">
                    <div class="item__icon">
                        <span class="iconMdsp person" aria-hidden="true"></span>
                    </div>
                    <div class="item__content">
                        <h4 class="label">List item, current</h4>
                        <div class="description">This is a list item. There is a status set to indicate something important.</div>
                    </div>
                    <div class="item__metaInfo">
                    </div>
                </a>
            </li>
        </ul>
    </div>
</div>

Usage

ElementClassDescription
.item__icon   Optional element: adds a supporting visual, e.g. an icon to a list element
.item__metaInfo   Optional element: adds an icon at the end of a list element to e.g. indicate a status.
.list__item .list__item--oneLine .list__item--twoLine .list__item--threeLine By default a list item is always as tall as there is content in it.
This classes restrict the height of a list item to be either one line (just the label), two line (label + one line description) or three line.
.list__item .has-overflowIndicator Adds an ellipsis at the end of the description of a list item. The content of the list item always gets cut off if there is not enough space for it.
.item__link .is-activated Sets the list item to the same style as while pressed with the mouse.
.item__link .is-current Marks the list item such that it is the currently selected item.
.item__link .is-disabled Disables the list item visually.
Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top