
Introduction
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.
Examples Desktop

Portrait view – with 1 Badge + Before price

Portrait view – with 3 Badges + Before Price

Portrait View – with Energy Control Badge

Horizontal view – with 1 Badge + Before price

Horizontal view – with 3 Badges + Before Price

Horizontal View – with Energy Control Badge
Examples Mobile

Portrait view – with 1 Badge + Before price

Portrait view – with 3 Badges + Before Price

Portrait View – with Energy Control Badge

Horizontal view – with 1 Badge + Before price

Horizontal view – with 3 Badges + Before Price

Horizontal View – with Energy Control Badge