Produkt-Karte — component.product-card
Der Grundstein aller Shop-Grids: Bild (oder Platzhalter), Sale-Badge, Wunsch-Herz, Titel, ui.price + ui.rating — komponiert aus den Shop-Elementen
Componentv1.0.1Commerceweb.documentweb.applicationbuilder.preview
Beispiele
Sale-Artikel mit Badge, Wunsch-Herz, Preis und Bewertung
Normalpreis ohne Bewertung
Satin-Kimono mit Gürtel14,99 €
Eigenschaften
| Prop | Typ | Default |
|---|---|---|
title * | string | — |
href | string | "#" |
imageUrl | string | "" |
amount * | string | — |
originalAmount | string | "" |
discount | string | "" |
value | number | 0 |
count | number | 0 |
wishlist | boolean | true |
Events & Slots
Events: wishlist
Stellschrauben (Komponenten-Tokens)
| Token | Default |
|---|---|
--product-card-elevation-control | var(--elevation-control) |
--product-card-radius-full | var(--radius-full) |
--product-card-radius-sm | var(--radius-sm) |
--product-card-radius-surface | var(--radius-surface) |
--product-card-sale | var(--color-sale) |
--product-card-surface-default | var(--color-surface-default) |
--product-card-surface-page | var(--color-surface-page) |
--product-card-surface-sunken | var(--color-surface-sunken) |
--product-card-text-default | var(--color-text-default) |
Genutzte Design-Tokens
color.sale color.surface.default color.surface.page color.surface.sunken color.text.default elevation.control font.family.default leading.base radius.full radius.sm radius.surface size.05 size.2 size.8 text.md text.xs weight.semibold