ProductCard
Skládací produktová karta z primitiv (Badge, CategoryBadge, PriceTag, TrustStars, UspTag, Cta). Naklikej props vlevo — náhled, grid i rail se mění live, včetně custom barev povrchu.
6
Primitiv
Badge → Cta
14
Props
surface · halo · …
hex
Custom bg
paleta + color
live
Konfigurátor
náhled · grid · rail
Konfigurátor
Vyber props vlevo, dole se vykreslí náhled + grid + rail live.
variantframeBgimageBghalocategoryquickAddratinguspsswatchesbadgeV gridu
V rail (scroll →)
Props & pravidla
<ProductCard>
components/blocks/product-card.tsx| Prop | Typ | Default | Použití |
|---|---|---|---|
| name / price / originalPrice | string / number | — | Data (originalPrice = sleva) |
| category | CategoryKey | — | Badge + glyf placeholder bez fota |
| variant | "framed" | "plain" | "framed" | Rám / minimal |
| frameBg / imageBg | ProductCardSurface | "card" / "sage" | Povrch (token nebo custom) |
| frameBgCustom / imageBgCustom | string | — | Hex když surface = custom |
| halo | "none" | "sage" | "mint" | "blush" | "brand" | "none" | Pastelová záře |
| badge | { label, variant } | — | Rohová marka |
| quickAdd | "none" | "icon" | "wide" | "floating" | "icon" | Do košíku tlačítko |
| rating / ratingPosition | { value, count } / pos | — | header | below-info |
| usps / uspsPosition | UspKey[] / pos | — | above-image | below-info |
| swatches | { color, label }[] | — | Barevné tečky variant |
| soldOut / href / onAddToCart | boolean / string / fn | — | Stav / odkaz / košík |
- Karta je kompozice primitiv — žádné nové tokeny; custom barvy jdou jen přes prop (inline style), ne natvrdo.
- Bez fota → kategorie-piktogram jako placeholder; s fotem předej `image`.
- Konfigurátor je design-tooling (Segmented / SurfacePicker / Collapse) — config se promítá do náhledu, gridu i railu naráz.