Product Card

Product cards display all key information
about a product in one place

pc/main

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 1 Badge + Before price

Portrait view – with 3 Badges + Before Price

Portrait view – with 3 Badges + Before Price

Portrait View – with Energy Control Badge

Portrait View – with Energy Control Badge

Horizontal view – with 1 Badge + Before price

Horizontal view – with 1 Badge + Before price

Horizontal view – with 3 Badges + Before Price

Horizontal view – with 3 Badges + Before Price

Horizontal View – with Energy Control Badge

Horizontal View – with Energy Control Badge

Examples Mobile

Portrait view – with 1 Badge + Before price

Portrait view – with 1 Badge + Before price

Portrait view – with 3 Badges + Before Price

Portrait view – with 3 Badges + Before Price

Portrait View – with Energy Control Badge

Portrait View – with Energy Control Badge

Horizontal view – with 1 Badge + Before price

Horizontal view – with 1 Badge + Before price

Horizontal view – with 3 Badges + Before Price

Horizontal view – with 3 Badges + Before Price

Horizontal View – with Energy Control Badge

Horizontal View – with Energy Control Badge