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

    1024px
    375px768px1400px

    One column

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

    1024px
    375px768px1400px

    Three columns

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

    1024px
    375px768px1400px

    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

    1024px
    375px768px1400px

    Properties

    PropertyTypeRequiredDefault
    col1Boolfalse-
    col3Boolfalse-
    masonryBoolfalse-
    utilClassNamesStringfalse-