Product Card

Product card is used in e-commerce to provide a concise and visually appealing way to showcase products and help users make informed purchase decisions

Known issues

Show details

Documentation is ahead of development. Please refer to the Code tab to ensure you see the available properties and functionalities.

Catalog card in CS+ catalog page

Component	Usage	Placement	User action
Catalog card Desktop/Mobile	Informative content, with multiple actions and inputs, an image, and text	Inside of Grid	Input forms, confirmation, toggle

Catalog cards may appear in different shapes and sizes and in different scenarios and contexts. It contains a product image, titles, descriptions, and calls to action.

Anatomy

Structure

Organism/Card Catalog

	1. Image area 2. Text area 3. Action area

1. Image area	The image area showing a product image is mandatory when using a product catalog component. All other atoms embedded (discount pill, cart pill, etc.) are not mandatory. See more in the "Atom/Image area"
2. Text area	The text area is also mandatory, but price and Loyalty atoms are optional. Check the atom's different options in "Atom/Text area"
3. Action area	Check the atom's different options in "Atom/action area"

Molecule/Image area

	1. Header information 2. Image 3. Favorites

1.Header information	Pills are only used when the product itself requires it. Pills can be: - Text + icon (optional icon) - left upper side - Optional - Just text (ex. -20%) - left upper side - can be price, percentage, new or free - Optional - Cart icon + number (once added to cart) - right upper side - Mandatory
2.Image	Mandatory The image (not the grey area, but the image) is in a square format - - Desktop - 180px by 180px - Mobile - 120px by 120px
3.Favourites	Optional Once the heart button is clicked it changes to heart filled icon.

Molecule/Text area

	1. MRO 2. SKU 3. Product title 4. Packtype dropdown 5. Price 6. Loyalty points

Optional

Price can be displayed in 2 different ways

Default

Promotion

Price can be hidden, but if the price is hidden, the action area will be too, except if it's a loyalty card.

1. MRO	Optional MRO - Mandatory, recommended, and optional - This is a pill with just a letter.
2.SKU	Optional Stock Keeping Unit - displays the product number
3.Product title	Mandatory Text can have up to 2 lines. If text surpasses 2 lines, ellipses will appear at the end of the second line.
4.Packtype	Optional A dropdown can appear when a product has different volumes for the same brand.
5.Price	Optional Price can be displayed in 2 different ways Default Promotion Price can be hidden, but if the price is hidden, the action area will be too, except if it's a loyalty card.
6.Loyalty points	Optional Loyalty points are points given to the user if the product is bought. If there is no price loyalty points can be displayed on the left-hand side.

Molecule/action area

	1. Stock 2. Input value + action button 3. Alert information

1. Stock	Mandatory if applicable Mandatory to use if the stock information is available in the data. If not it can be hidden This is connected to the actions, if there are no actions, then there is no stock as well.
2. Input value + action button	Input value If the product is illegible to be bought then the input should appear. - the minus button decreases the value (1 by 1). - the plus button increases the value (1 by 1) - Can be disabled if a maximum amount has been reached. - If clicked in the input area user can write down the number he wishes - Can only reach a maximum of 9999. Action button Action should always be visible unless the "Atom/action" is disabled. While enabled it should always have action. - Add to cart action (desktop - text only) and cart icon (mobile - icon only) Exception: - Alternative action - If there is no stock for that specific product remove all the inp
3. Alert information	Optional Uses the Inline alert atom from malty and only appears if there is a need to inform about something regarding the product (ex. max number of the stock reached)

Diference in alternative vs normal card

Different card styles (plain, outlined, shadowed)

Sizes and Spaces

	If you are using the version with no padding (shown below), then the only spaces on the main component are: - 8px between the image and text area - 8px between the text area and action area
	Catalog card with padding is the same bit has and overall 16px around the component.
	For the mobile version without padding, it stays the same as the desktop version (see the first row).
	If the mobile version has padding then it has 8px around the whole component.
	For the atoms inside of the main component, it consists of 8px padding separating every other atom with 2 exceptions: - the margin below the image, both with 16px apart. - the button with the input - this distance can increase and decrease, in mobile is 8px, but if the component is wider then it increases as well.

Properties

Property	Value	Description
Device	desktop mobile	---
Type	default promo empty loyalty	Default - No discounts, can have a promo. Promo - Has a discount applied, can also have a promo. Empty - related to products that you can return the empty can (fill is different to indicate it is an empty - System - success light - 50%) Loyalty - Does not have a price, discount, or promos associated.
Style	plain outlined shadowed	Plain - no background on the text area Outlined - there's an outline around the whole card as well as padding, and a white background Shadowed - White background with padding, and a shadow like in cards.
Promo	true false	Indication if the product has a promotion.
Discount	true false	Indication if the product has a discount.
Cart	true false	Indicates if the product is already in the cart.
MRO	true false	Hide/Show MRO.
SKU	true false	Hide/Show Sku.
Packtype	true false	If a product has multiple pack types you can activate a dropdown to select which pack type you want.
Stock	in stock low stock no information no stock no stock + date	Different States that products can be in: In stock - The product has stock in store Low stock - The product has low stock in store. No information - The store does not know the stock of the product. No stock - No stock in store (here user cannot add to the cart, but he can see alternatives) No stock + date - No stock in store + date when the stock will be available again.
Alert information	true false	If the product has reached max stock that can deliver.

Behavior

Interaction

Card catalog behaviour on mouse hover and click

Responsiveness

Card catalog responsiveness

The Catalog card has a fluid width. If there is enough width to fit another Catalog card, it should happen. As for its height, it adjusts to its content's height, but changing the content height in one of the cards will affect the whole row of products (only that row), this way the buttons are always aligned at the bottom.

The Catalog card has a min-width of 150px and the max-width depends on the space it has to fill.

The Catalog card has a min-height of 312px and the max-width depends on the space it has to fill.

The price is the only atom that will be centralized in the component, it moves based on the height.

Max-width on each breakpoint

Component	Extra-large >1366px	Large 1366px	Medium 1024px	Small 768px	Extra-small 428px
Catalog card	4 to 5 cards desktop in a row	4 cards desktop in a row	3 cards desktop in a row	2 cards desktop in a row	2 cards mobile in a row

Guidelines