Element Listing

Overview

When to use

The element-listing is used to list elements like cards or teaser-promo in a grid.

When to consider an alternative

If you want to build complex layout with different column sizes. Use grid instead.

Component

Default

One column

The one column variant can be used to display elements like the promo-teaser or informal-teaser. .snx-element-listing--col-1

Three columns

The three column variant can be used to display elements like the promo-teaser or cards. .snx-element-listing--col-3

Masonry

For an optimal result only use the element-listing with placing promo-teasers counting 3,4,7,8,11 or 12 times in total. If an even number of elements is used, each second element will be shown explicitly prominent. By using uneven numbers, the last two elements will be displayed less prominent. .snx-element-listing--masonry

Properties