Product Card

Commerce · Price, ProductArt, ProductCard, Rating, StockBadge

Product tile for catalogs and grids, plus the pieces it is made of: Price, Rating, StockBadge and ProductArt.

ProductCard props: name, meta, art + tint (or swap in your own image inside .tf-product-media), price, compareAt, rating, reviews, badge + badgeTone, stock, wished + onWish, added + onAdd, onClick.
Price: value, compareAt (shows the struck price and −%), size ("lg"), currency, showSave. Rating: value, count, size. StockBadge: stock, low (10), compact. ProductArt: kind (tee, mug, bottle, cap, tote, sneaker, watch, lamp), tint, size.

One badge per card at most (Bestseller, New, Sold out). Sale is shown by the price, not a badge.
Quick-add only for products without variants; otherwise open the product page.
Low stock is a warning badge with the number left; out of stock disables add.

PreviewCode

Bestseller

Halo Cotton TeeApparel

4.7(128)

€32~~€39~~−18%

Studio MugHome

4.9(96)

€18

New

Field BottleOutdoor

4.6(61)

€28

Sold out

Canvas ToteBags

4.8(143)

€24Sold out

€32~~€39~~−18%4.6(61)In stock · 84Low stock · 6 leftOut of stock

Props

Price

Prop	Type	Notes
`value`	`number`	Required
`compareAt?`	`number`
`currency?`	`string`
`size?`	`"lg"`
`showSave?`	`boolean`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

ProductArt

Prop	Type	Notes
`kind`	`ArtKind`	Required
`tint?`	`Tint \| "plain"`
`size?`	`number`
`label?`	`string`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

ProductCard

Prop	Type	Notes
`name`	`string`	Required
`meta?`	`string`
`art`	`ArtKind`	Required
`tint?`	`Tint`
`price`	`number`	Required
`compareAt?`	`number`
`rating?`	`number`
`reviews?`	`number`
`badge?`	`string`
`badgeTone?`	`Tone`
`stock?`	`number`
`wished?`	`boolean`
`onWish?`	`() => void`
`added?`	`boolean`
`onAdd?`	`() => void`
`onClick?`	`() => void`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

Rating

Prop	Type	Notes
`value`	`number`	Required
`count?`	`number`
`size?`	`number`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

StockBadge

Prop	Type	Notes
`stock`	`number`	Required
`low?`	`number`
`compact?`	`boolean`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.