Listing

This component is a list of texts or links. The component is used in particular as a dropdown content. // This list does not have to be a <ul> or an <ol> list, it can also be built up with simple <div> elements. But if you use an ol list, the list is numbered consecutively. // If you want to make a link from one of the item entries, the .item__text element should be the hyperlink. This makes the whole row clickable. With the .hyperlink--clear modifier this link can be provided in the same style as the rest of the text entries.

Theme basic Screen size XL
html

Grouped List

In this variant, the list can be grouped. There is a group text with a normal list underneath.

If an <ol> list is used, the group texts and list entries are counted. Such an ol list can only have two levels.

Theme basic Screen size XL
html

Modifiers

A list can be customized using class modifiers. The following sub-chapters list all existing classes of list modifier.

Stretch

A list with the .listing--stretch class modifier use the full width.

Stretching can also be limited to the various breakpoint ranges.

  • .listing--stretch-lg stretch until breakpoint lg
  • .listing--stretch-md stretch until breakpoint md
  • .listing--stretch-sm stretch until breakpoint sm
  • .listing--stretch-xs stretch until breakpoint xs
Theme basic Screen size XL
html

Suppress Vertical Scrolling

The following is an example with many entries. Normally a list becomes scrollable after a certain length. However, this can be prevented with the modifier .listing--suppress-vertical-scrolling.

Theme basic Screen size XL
html

No Border

With the modifier .listing--no-border you can use the listing but without any border and shadow styles.

Theme basic Screen size XL
html

Icon and Images

It is posible to add a Image or a Icon in the .item__text by using the .listing__image or the .listing__icon element.

Theme basic Screen size XL
html

No hover effect

You can suppress the hover effect with the .listing--no-hover modifier.

Theme basic Screen size XL
html

TODO

The following implementations are still pending.

  • collapsible listing
  • lists with complex html in the item, see MI watch list
  • hyperlink–clear not works correct