Product card width & Breaking points

The width of a product card is expressed in pixels and results from the widest asset size put in a Component.

Depending on an E-retailer, product cards might have to have certain maximal width. Make sure E-retailers provides this data in briefs.

Leaving incorrect or default width might result in incorrect display of a product card on the E-retailers website.

Tip:
In most cases, building cards in Tablet View, is a good starting point, as it will display correctly on both Desktop and Tablet horizontal view.

Then you can design a mobile view. Having only those two views will cover every device, as views for in-between screens will scale automatically.

Important:
The absolute maximum Component width is 1200 px (desktop size).

Breaking points
The components are fully responsive, meaning they will automatically scale to fit the screen or a size of browser window.
Below are breaking points for different views with corresponding sizes for various screen/window widths.