List

Lists can be used to show an arbitrary number of elements of the same type along with their attributes and meta data as well as basic action icons.
To align content in different columns, the .item__content column/wrapper elements have to be used.

To see a detailed explanation of all existing helper and debug classes, please refer to the usage table below.

List

List
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  • List item title

    Congue eu consequat ac felis donec et odio, congue eu consequat ac felis donec et odio.
    Meta Information
    123
  • List item title

    Congue eu consequat ac felis donec et odio, congue eu consequat ac felis donec et odio.
    Meta Information
    123
  • List item title

    Congue eu consequat ac felis donec et odio, congue eu consequat ac felis donec et odio.
    Meta Information
    123
<div class="list">
    <div class="list__header">
        List
        <div class="header__description">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        </div>
    </div>
    <ul class="list__list">
        <li class="list__item">
            <div class="item__content">
                <div class="content__column content__column--primary has-default-width-20 xs-100 sm-66 md-33">
                    <h4 class="item__title">
                        List item title
                    </h4>
                    <div class="item__description">
                        Congue eu consequat ac felis donec et odio, congue eu consequat ac felis donec et odio.
                    </div>
                </div>
                <div class="content__column has-default-width-20 xs-100 xl-10 xs-hide sm-hide">
                    <div class="item__meta">
                        Meta Information
                    </div>
                </div>
                <div class="content__column has-default-width-20 xs-100 md-25 xs-hide">
                    <span class="badge has-bgColor-gray400 has-color-snow">
                        123
                    </span>
                    <i aria-hidden="true" class="iconMdsp flagSmall black has-color-stateBlue100"></i>
                    <i aria-hidden="true" class="iconMdsp attention black has-color-stateBlue100"></i>
                </div>
                <div class="content__column has-alignment-right has-default-width-20 xs-100 sm-33">
                    <button class="button--secondary has-icon-only">
                        <span class="iconMdsp edit" aria-hidden="true"></span>
                    </button>
                    <button class="button--secondary has-icon-only">
                        <span class="iconMdsp clipboardCheck" aria-hidden="true"></span>
                    </button>
                </div>
            </div>
        </li>
        <li class="list__item">
            <div class="item__content">
                <div class="content__column content__column--primary has-default-width-20 xs-100 sm-66 md-33 lg-20 xl-20">
                    <h4 class="item__title">
                        List item title
                    </h4>
                    <div class="item__description">
                        Congue eu consequat ac felis donec et odio, congue eu consequat ac felis donec et odio.
                    </div>
                </div>
                <div class="content__column has-default-width-20 xs-100 xl-10 xs-hide sm-hide">
                    <div class="item__meta">
                        Meta Information
                    </div>
                </div>
                <div class="content__column has-default-width-20 xs-100 sm-10 md-25 lg-10 xl-10 xs-hide">
                    <span class="badge has-bgColor-gray400 has-color-snow">
                        123
                    </span>
                    <i aria-hidden="true" class="iconMdsp flagSmall black has-color-contextRed500"></i>
                    <i aria-hidden="true" class="iconMdsp errorAlert black has-color-contextRed500"></i>
                </div>
                <div class="content__column has-alignment-right has-default-width-20 xs-100 sm-33 md-20 lg-20 xl-20">
                    <button class="button--secondary has-icon-only">
                        <span class="iconMdsp edit" aria-hidden="true"></span>
                    </button>
                    <button class="button--secondary has-icon-only">
                        <span class="iconMdsp clipboardCheck" aria-hidden="true"></span>
                    </button>
                </div>
            </div>
        </li>
        <li class="list__item">
            <div class="item__content">
                <div class="content__column content__column--primary has-default-width-20 xs-100 sm-66 md-33 lg-20 xl-20">
                    <h4 class="item__title">
                        List item title
                    </h4>
                    <div class="item__description">
                        Congue eu consequat ac felis donec et odio, congue eu consequat ac felis donec et odio.
                    </div>
                </div>
                <div class="content__column has-default-width-20 xs-100 xl-10 xs-hide sm-hide">
                    <div class="item__meta">
                        Meta Information
                    </div>
                </div>
                <div class="content__column has-default-width-20 xs-100 sm-10 md-25 lg-10 xl-10">
                    <span class="badge has-bgColor-gray400 has-color-snow">
                        123
                    </span>
                    <i aria-hidden="true" class="iconMdsp flagSmall black has-color-functionalGreen"></i>
                    <i aria-hidden="true" class="iconMdsp ok black has-color-functionalGreen"></i>
                </div>
                <div class="content__column has-default-width-20 xs-100 sm-33 md-20 lg-20 xl-20 has-alignment-right">
                    <button class="button--secondary has-icon-only">
                        <span class="iconMdsp edit" aria-hidden="true"></span>
                    </button>
                    <button class="button--secondary has-icon-only">
                        <span class="iconMdsp clipboardCheck" aria-hidden="true"></span>
                    </button>
                    <button class="button--ghost has-icon-only">
                        <span class="iconMdsp outgoingInMdsp" aria-hidden="true"></span>
                    </button>
                </div>
            </div>
        </li>
    </ul>
</div>

Compact list

Compact list
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  • List item title

    Congue eu consequat ac felis donec et odio, congue eu consequat ac felis donec et odio.
    Meta Information
    123
  • List item title

    Congue eu consequat ac felis donec et odio.
    Meta Information
    123
<div class="list">
    <div class="list__header">
        Compact list
        <div class="header__description">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        </div>
    </div>
    <ul class="list__list">
        <li class="list__item">
            <div class="item__icon">
                <span class="iconMdsp asset" aria-hidden="true"></span>
            </div>
            <div class="item__content">
                <div class="content__column content__column--primary xs-100 sm-66 md-33 lg-20 xl-20">
                    <h4 class="item__title">
                        List item title
                    </h4>
                    <div class="item__description">
                        Congue eu consequat ac felis donec et odio, congue eu consequat ac felis donec et odio.
                    </div>
                </div>
                <div class="content__column xs-100 sm-33 md-33 lg-33 xl-10 xs-hide sm-hide">
                    <div class="item__meta">
                        Meta Information
                    </div>
                </div>
                <div class="content__column xs-100 sm-10 md-25 lg-10 xl-10 xs-hide">
                    <span class="badge has-bgColor-gray100 has-color-functionalGreen">
                        123
                    </span>
                    <i aria-hidden="true" class="iconMdsp information has-color-stateBlue100"></i>
                </div>
                <div class="content__column has-alignment-right xs-100 sm-33 md-20 lg-20 xl-20">

                </div>
            </div>
        </li>
        <li class="list__item">
            <div class="item__icon">
                <span class="iconMdsp asset" aria-hidden="true"></span>
            </div>
            <div class="item__content">
                <div class="content__column content__column--primary xs-100 sm-66 md-33 lg-20 xl-20">
                    <h4 class="item__title">
                        List item title
                    </h4>
                    <div class="item__description">
                        Congue eu consequat ac felis donec et odio.
                    </div>
                </div>
                <div class="content__column xs-100 sm-33 md-33 lg-33 xl-10 xs-hide sm-hide">
                    <div class="item__meta">
                        Meta Information
                    </div>
                </div>
                <div class="content__column xs-100 sm-10 md-25 lg-10 xl-10 xs-hide">
                    <span class="badge has-bgColor-contextRed500 has-color-snow">
                        123
                    </span>
                    <i aria-hidden="true" class="iconMdsp exclamationDiamond black has-color-functionalYellow"></i>
                </div>
                <div class="content__column has-alignment-right xs-100 sm-33 md-20 lg-20 xl-20 ">

                </div>
            </div>
        </li>
    </ul>
</div>

Compact list without icon

  • List item title

    Congue eu consequat ac felis donec et odio, congue eu consequat ac felis donec et odio.
    Meta Information
    123
  • List item title

    Congue eu consequat ac felis donec et odio.
    Meta Information
    123
<div class="list">
    <ul class="list__list">
        <li class="list__item">
            <div class="item__content">
                <div class="content__column content__column--primary xs-100 sm-66 md-33 lg-20 xl-20">
                    <h4 class="item__title">
                        List item title
                    </h4>
                    <div class="item__description">
                        Congue eu consequat ac felis donec et odio, congue eu consequat ac felis donec et odio.
                    </div>
                </div>
                <div class="content__column xs-100 sm-33 md-33 lg-33 xl-10 xs-hide sm-hide">
                    <div class="item__meta">
                        Meta Information
                    </div>
                </div>
                <div class="content__column xs-100 sm-10 md-10 lg-10 xl-10 xs-hide">
                    <span class="badge has-bgColor-gray100 has-color-functionalGreen">
                        123
                    </span>
                    <i aria-hidden="true" class="iconMdsp information has-color-stateBlue100"></i>
                </div>
                <div class="content__column has-alignment-right xs-100 sm-33 md-20 lg-20 xl-20 ">

                </div>
            </div>
        </li>
        <li class="list__item">
            <div class="item__content">
                <div class="content__column content__column--primary xs-100 sm-66 md-33 lg-20 xl-20">
                    <h4 class="item__title">
                        List item title
                    </h4>
                    <div class="item__description">
                        Congue eu consequat ac felis donec et odio.
                    </div>
                </div>
                <div class="content__column xs-100 sm-33 md-33 lg-33 xl-10 xs-hide sm-hide">
                    <div class="item__meta">
                        Meta Information
                    </div>
                </div>
                <div class="content__column xs-100 sm-10 md-10 lg-10 xl-10 xs-hide">
                    <span class="badge has-bgColor-contextRed500 has-color-snow">
                        123
                    </span>
                    <i aria-hidden="true" class="iconMdsp exclamationDiamond black has-color-functionalYellow"></i>
                </div>
                <div class="content__column has-alignment-right xs-100 sm-33 md-20 lg-20 xl-20 ">

                </div>
            </div>
        </li>
    </ul>
</div>

Usage

ElementClassDescription
.list__header The list header is optional and can be removed.
.content__column .content__column--primary Marks the primary data cell for a special headline and description styling.
.content__column .xx-yyy This class can be customized for following breakpoints (xx):
  • xs, sm, md, lg, xl.
In combination with the percentage (yyy) of the data cell for the specified breakpoint:
  • 5, 10, 20, 25, 30, 33, 40, 50, 60, 66, 70, 75, 80, 90, 95 and 100
e.g. .lg-25, .md-50, .sm-75, .xs-100, ...
.content__column .has-default-width-XX Sets the default width in percent for the according data cell if no other specific width is set for the viewport:
  • Possible percentage values for the defaultWidth-class:
    5, 10, 20, 25, 30, 33, 40, 50, 60, 66, 70, 75, 80, 90, 95 and 100.
The default width, e.g. .has-defaultWidth-50, can be overwritten with the classes described above, e.g. .lg-75 for large displays.
.content__column .xx-hide Every data cell can be hidden for a certain breakpoint. Note that the data cell will still be visible below and above the two breakpoints.
Following values are possible:
  • .xs-hide, .sm-hide, .md-hide, .lg-hide and .xl-hide.
.item__content .xx-nowrap Every list row can be set so that its columns don't wrap if their combined widths are more then 100 percent. By default, columns wrap if they don't fit into one row. By adding this class, the columns will stay in one line for the specified breakpoint range. Following values are possible:
  • .xs-nowrap, .sm-nowrap, .md-nowrap, .lg-nowrap and .xl-nowrap
.content__column .has-alignment-right Marks the data cell which shall be used for action icons/buttons:
  • Data cell should always be right aligned.
Note that this class is not working in combination with the state class .content__column--primary.
.content__column .has-alignment-top The content of this data cell will be aligned to the top of the cell's row.
.content__column .has-alignment-bottom The content of this data cell will be aligned to the bottom of the cell's row.
.content__column .has-alignment-center The content of this data cell will be vertically centered within the cell's row.

Note that a cell can only be aligned top OR center OR bottom, assigning multiple of these helper classes might result in unexpected behaviour.
.content__column .iconMdsp .no-margin-left The default left margin of the icon gets removed.
.content__column a .has-icon-only The underlining of an icon nested in an <a> tag gets removed.

List with debug option

List - debug
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  • List item title

    Congue eu consequat ac felis donec et odio, congue eu consequat ac felis donec et odio.
    Meta Information
    123
  • List item title

    Congue eu consequat ac felis donec et odio, congue eu consequat ac felis donec et odio.
    Meta Information
    123
  • List item title

    Congue eu consequat ac felis donec et odio, congue eu consequat ac felis donec et odio.
    Meta Information
    123
<div class="list debug">
    <div class="list__header">
        List - debug
        <div class="header__description">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        </div>
    </div>
    <ul class="list__list">
        <li class="list__item">
            <div class="item__content">
                <div class="content__column content__column--primary has-default-width-20 xs-100 sm-66 md-33">
                    <h4 class="item__title">
                        List item title
                    </h4>
                    <div class="item__description">
                        Congue eu consequat ac felis donec et odio, congue eu consequat ac felis donec et odio.
                    </div>
                </div>
                <div class="content__column has-default-width-20 xs-100 xl-10 xs-hide sm-hide">
                    <div class="item__meta">
                        Meta Information
                    </div>
                </div>
                <div class="content__column has-default-width-20 xs-100 sm-10 md-25 lg-10 xl-10 xs-hide has-centering-vertical">
                    <span class="badge has-bgColor-gray400 has-color-snow">
                        123
                    </span>
                    <i aria-hidden="true" class="iconMdsp flagSmall black has-color-stateBlue100"></i>
                    <i aria-hidden="true" class="iconMdsp attention black has-color-stateBlue100"></i>
                </div>
                <div class="content__column has-alignment-right has-default-width-20 xs-100 sm-33 has-centering-vertical">
                    <button class="button--secondary has-icon-only">
                        <span class="iconMdsp edit" aria-hidden="true"></span>
                    </button>
                    <button class="button--secondary has-icon-only">
                        <span class="iconMdsp clipboardCheck" aria-hidden="true"></span>
                    </button>
                </div>
            </div>
        </li>
        <li class="list__item">
            <div class="item__content">
                <div class="content__column content__column--primary has-default-width-20 xs-100 sm-66 md-33 lg-20 xl-20">
                    <h4 class="item__title">
                        List item title
                    </h4>
                    <div class="item__description">
                        Congue eu consequat ac felis donec et odio, congue eu consequat ac felis donec et odio.
                    </div>
                </div>
                <div class="content__column has-default-width-20 xs-100 xl-10 xs-hide sm-hide">
                    <div class="item__meta">
                        Meta Information
                    </div>
                </div>
                <div class="content__column has-default-width-20 xs-100 sm-10 md-25 lg-10 xl-10 xs-hide has-centering-vertical">
                    <span class="badge has-bgColor-gray400 has-color-snow">
                        123
                    </span>
                    <i aria-hidden="true" class="iconMdsp flagSmall black has-color-contextRed500"></i>
                    <i aria-hidden="true" class="iconMdsp errorAlert black has-color-contextRed500"></i>
                </div>
                <div class="content__column has-alignment-right has-default-width-20 xs-100 sm-33 md-20 lg-20 xl-20 has-centering-vertical">
                    <button class="button--secondary has-icon-only">
                        <span class="iconMdsp edit" aria-hidden="true"></span>
                    </button>
                    <button class="button--secondary has-icon-only">
                        <span class="iconMdsp clipboardCheck" aria-hidden="true"></span>
                    </button>
                </div>
            </div>
        </li>
        <li class="list__item">
            <div class="item__content">
                <div class="content__column content__column--primary has-default-width-20 xs-100 sm-66 md-33 lg-20 xl-20">
                    <h4 class="item__title">
                        List item title
                    </h4>
                    <div class="item__description">
                        Congue eu consequat ac felis donec et odio, congue eu consequat ac felis donec et odio.
                    </div>
                </div>
                <div class="content__column has-default-width-20 xs-100 xl-10 xs-hide sm-hide">
                    <div class="item__meta">
                        Meta Information
                    </div>
                </div>
                <div class="content__column has-default-width-20 xs-100 sm-10 md-25 lg-10 xl-10 xs-hide has-centering-vertical">
                    <span class="badge has-bgColor-gray400 has-color-snow">
                        123
                    </span>
                    <i aria-hidden="true" class="iconMdsp flagSmall black has-color-functionalGreen"></i>
                    <i aria-hidden="true" class="iconMdsp ok black has-color-functionalGreen"></i>
                </div>
                <div class="content__column has-default-width-20 xs-100 sm-33 md-20 lg-20 xl-20 has-alignment-right">
                    <button class="button--secondary has-icon-only">
                        <span class="iconMdsp edit" aria-hidden="true"></span>
                    </button>
                    <button class="button--secondary has-icon-only">
                        <span class="iconMdsp clipboardCheck" aria-hidden="true"></span>
                    </button>
                    <button class="button--ghost has-icon-only">
                        <span class="iconMdsp outgoingInMdsp" aria-hidden="true"></span>
                    </button>
                </div>
            </div>
        </li>
    </ul>
</div>

Compact list with debug option

Compact list - debug
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  • List item title

    Meta Information width a lot of textual information so the row gets higher. Meta Information width a lot of textual information so the row gets higher.Meta Information width a lot of textual information so the row gets higher.
    123
    Lorem ipsum
  • List item title

    Congue eu consequat ac felis donec et odio.
    Meta Information
    123
    Lorem ipsum
<div class="list debug">
    <div class="list__header">
        Compact list - debug
        <div class="header__description">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        </div>
    </div>
    <ul class="list__list">
        <li class="list__item">
            <div class="item__icon">
                <span class="iconMdsp asset" aria-hidden="true"></span>
            </div>
            <div class="item__content">
                <div class="content__column content__column--primary has-alignment-center xs-100 sm-66 md-33 lg-20 xl-20">
                    <h4 class="item__title">
                        List item title
                    </h4>

                </div>
                <div class="content__column xs-100 sm-33 md-33 lg-33 xl-10 xs-hide sm-hide">
                    <div class="item__meta">
                        Meta Information width a lot of textual information so the row gets higher. Meta Information width a lot of textual information so the row gets higher.Meta Information width a lot of textual information so the row gets higher.
                    </div>
                </div>
                <div class="content__column xs-100 sm-10 md-25 lg-10 xl-10 xs-hide">
                    <span class="badge has-bgColor-gray100 has-color-functionalGreen">
                        123
                    </span>
                    <i aria-hidden="true" class="iconMdsp information has-color-stateBlue100"></i>
                </div>
                <div class="content__column has-alignment-right xs-100 sm-33 md-20 lg-20 xl-20 ">
                    Lorem ipsum
                </div>
            </div>
        </li>
        <li class="list__item">
            <div class="item__icon">
                <span class="iconMdsp asset" aria-hidden="true"></span>
            </div>
            <div class="item__content">
                <div class="content__column content__column--primary xs-100 sm-66 md-33 lg-20 xl-20">
                    <h4 class="item__title">
                        List item title
                    </h4>
                    <div class="item__description">
                        Congue eu consequat ac felis donec et odio.
                    </div>
                </div>
                <div class="content__column xs-100 sm-33 md-33 lg-33 xl-10 xs-hide sm-hide">
                    <div class="item__meta">
                        Meta Information
                    </div>
                </div>
                <div class="content__column xs-100 sm-10 md-25 lg-10 xl-10 xs-hide">
                    <span class="badge has-bgColor-contextRed500 has-color-snow">
                        123
                    </span>
                    <i aria-hidden="true" class="iconMdsp exclamationDiamond black has-color-functionalYellow"></i>
                </div>
                <div class="content__column has-alignment-right xs-100 sm-33 md-20 lg-20 xl-20 ">
                    Lorem ipsum
                </div>
            </div>
        </li>
    </ul>
</div>

Usage

ElementClassDescription
.list .debug Applies different background colors to the columns to have a visual debugging option.
Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top