Product card

One product; the whole card links to its page and hides itself when the grid filters it out.

Catalog

Pack defaults

With content

In context

Source

import { ProductCard } from "demo-webshop/components";

const props = {
  "name": "Product",
  "href": "#",
  "src": "",
  "alt": "",
  "price": 0,
  "currency": "USD",
  "category": "desk",
  "availability": "in-stock",
  "stockLabel": "In stock",
  "slug": "",
  "featured": false,
  "tag1": "",
  "tag2": "",
  "tag3": ""
};
<ProductCard {...props} />

Live CSS

Injected into the previews above. Product card

/* Live CSS — edits inject into every preview above.
   Try overriding a component utility, e.g.:
   .btn { letter-spacing: 0.04em; } */