Component: Product Catalog Tiles

| This is a legacy component that is not being actively maintained. Please reach out to if you have a use case for this component. |

Purpose: A list of products with optional filtering. Use this component to display cards with images which can redirect the customer to specific campaigns.

Screenshot_2022-11-10_at_13.13.31.png

Props

Prop Name	Label	Type	Default Value	Description
showHeadingBar	Show heading bar	boolean	false	If true the heading text will appear
headingBarHeadingText	Heading bar heading text	string	Related Products	Heading text
headingBarCtaText	Heading bar CTA text	string	View All	Heading bar CTA text
headingBarCtaUrl	Heading bar CTA url	richtext		Heading CTA url
showProductFilter	Show product filter?	boolean	true	If true the product filter modal will be shown
productFilterTopicLabel	Product topic filter label	string	Filter by Topic	Product topic filter label
productFilterTypeLabel	Product type filter label	string	Filter by Type	Product type filter label
productCatalogTilesGridRowAmount	Amount of products shown per row	number	4	Number of products visible
productCatalogDataUrl	Product catalog data url	string	null	Product catalog data url
showProductTileIcon	Show icon on product tile?	boolean	true	If true the icon between the image and text will be visible
productTileIconColor	Colour for the product image icon	color	#FFFFFF	Colour for the product tile icon
productTileIconColorBackground	Colour for the product image icon background	color	#E97425	Colour for the product tile icon background
productTileImageColorOverlay	Colour for product image overlay in RGBA format	string	rgba(0,62,116, 0.6)	Colour for product image overlay in RGBA format
productTileCtaHintText	Text to show as a CTA hint in product tile	string	""