Product card · Swiss
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 · Swiss9 / 20
Heavy top rule, flush-left name, giant right-aligned price numeral, red sale flag on the photo and a full-width ink bar button with an arrow.
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