Product Card

Anatomy

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