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.

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.

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

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.

No Border

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

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.

No hover effect

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

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