Product Listing

Overview

When to use

The product listing is used to list products in a responsive grid view, so each element in a row has the same height. The product listing can be complemented by multiple insertion patterns or a promotional teaser element. This can be used to enrich the listed products through additional information regarding their usage.

When to consider an alternative

If the desired listing does not contain multiple products, but the elements should be presented grid-like, use the element listing.

Component

Default

Examples

Add .snx-product-listing__content-element as utilClassNames for Promo Teaser or Insertion.

Product-listing categories

Properties

ProductListing

Property	Type	Required	Default
children	Node	false	-
categories	Node	false	-
utilClassnames	String	false	-

ProductListing.Categories

Property	Type	Required	Default
mobile	Node	false	-
desktop	Node	false	-
mobileTitle	String	false	-
utilClassNames	String	false	-

ProductListing.CategoriesItem

Property	Type	Required	Default
label	String	false	-
active	Bool	false	-
utilClassNames	String	false	-
children	String	false	-

ProductListing.CategoriesMobileItem

Property	Type	Required	Default
label	String	false	-
active	Bool	false	-
utilClassNames	String	false	-
children	String	false	-

ProductListing.CategoriesMobileBackButton

Property	Type	Required	Default
href	String	false	-
label	String	false	-
utilClassNames	String	false	-