Product card · Mono
A shop product card with CSS-drawn product art, price with compare-at discount, rating, colour swatches, a wishlist heart and an add-to-cart button that confirms.
Design · Mono19 / 20
Black-on-white outlined card; heart inverts on hover and the pill button takes the accent (black by default).
Motion
The card lifts into place and its details follow one after another, 55 ms apart.
Accent
A shop product card with CSS-drawn product art, price with compare-at discount, rating, colour swatches, a wishlist heart and an add-to-cart button that confirms.
productshopecommercecardpriceratingswatcheswishlistcart