Product card · High Contrast
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 · High Contrast20 / 20
44 px targets, thick 2 px borders, hatched media, 'SALE: SAVE 24%' in words, 'Wishlist: off' state labels and an underlined button.
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