Product Cards
Product card types, stock states, variable pricing, hover description, and loading skeletons.
Card types and stock states
The library's example products: a variable product showing a 'From' price, an out-of-stock card, a card without a product type badge, and a basic card with badge, size, and hover description.
.webp)
.webp)
.webp)
.webp)
import { ProductCard, type ProductCardData } from '@mediayard/agoratopia-ui/components/product-card';
<ProductCard product={my_product} /> Loading skeleton
Shown while product data is being fetched.
import { ProductCardLoader } from '@mediayard/agoratopia-ui/components/product-card';
<ProductCardLoader />