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