Product Card

Resources

Intro & Anatomy

Product cards present users with essential product information, enabling them to make informed decisions. They are used for product listings on e-commerce websites.

A product card always includes an image, title, and price. It can also feature review ratings, badges, energy control labels, weight, and unit price. The top right button is reserved for actions such as adding the product to a cart or list.

The product card is available in both vertical (portrait) and horizontal orientations, for both desktop and mobile views.

 

1. Icon button: Used for actions like "add to cart" or displaying a static icon if the item is unavailable.
2. Energy control: Indicates the energy efficiency of an appliance, rated from A to G, with A being the most efficient and G the least.
3. Image: Displays the product image. If no image is available, a placeholder with a crossed-out camera icon is used.
4. Badge: Provides additional information about the product, such as price promotions, multipacks, or Cumulus promotions.
5. Price: Shows the full price, with options to display the previous price or regional pricing if applicable.
6. Title: Includes the brand, brand line, product name, and version.
7. Additional info: Displays product details like weight, unit price, or quantity.
8. Star Rating: Shows the product's rating based on customer reviews.

Energy Control

Product image

Price

Badges

 

Desktop

Mobile

 

---

Display on Desktop

 

---

Display on Mobile