E-Commerce
Product Card — Grid
Catalogue grid tile with image, title, rating, price with compare-at discount badge, and an out-of-stock overlay.
$ velocityx add product-card-gridBuilt for astro.
Full docs for Product Card — Grid →
Needs a licence key —
subscribe here, then
velocityx loginonce.
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| product | Product | Yes | ||
| href | string | Yes | ||
| locale | string | No | 'en-AU' | |
| className | string | No | '' |
File this creates
The CLI writes this path into your project, relative to its root — nothing else moves.
components/velocity/product-card-grid/ProductCardGrid.astroUsing the Product Card — Grid component
Install it with velocityx add product-card-grid.
The CLI writes the source straight into your project — no runtime dependency, no registry
lock-in, and it themes itself from the same primary-*/accent-* scale as the rest of the library.
Related components
More from E-Commerce.
Order totals block listing subtotal, shipping, tax and discount rows that only render when passed, plus a grand total.
astroResponsive image-and-label tile grid linking into catalogue categories, with an optional item count.
astroCentred placeholder for an empty cart with icon, copy and a continue-shopping CTA.
astroPost-checkout success panel with order number, delivery estimate, line items and total paid.
astro