Preis
Shop-Preiszeile: Betrag (bei Streichpreis automatisch in Sale-Farbe), Streichpreis, Rabatt-Badge — Sale-Ton über den themebaren color.sale-Token
Beispiele
Sale-Preis mit UVP und Rabatt-Badge
9,49 €24,99 €-62%
Normalpreis
24,99 €
Eigenschaften
| Prop | Typ | Default | Builder-Label |
|---|---|---|---|
| amount * | string | — | Betrag (formatiert, z.B. 9,99 €) |
| originalAmount | string | "" | Streichpreis (UVP) |
| discount | string | "" | Rabatt-Badge (z.B. -61%) |
| size | string: md | lg | "lg" | Größe |
* Pflicht-Prop
Stellschrauben (Komponenten-Tokens)
Ebene 3 — aus dem CSS generiert (Registry). Umverdrahtbar per Hüllen-Komposition, ohne Markup-Eingriff; künftige Regler-Quelle des Component Builders.
| Token | Default |
|---|---|
--price-radius-sm | var(--radius-sm) |
--price-sale | var(--color-sale) |
--price-surface-page | var(--color-surface-page) |
--price-text-default | var(--color-text-default) |
--price-text-muted | var(--color-text-muted) |
Genutzte Design-Tokens
color.salecolor.surface.pagecolor.text.defaultcolor.text.mutedfont.family.defaultradius.smsize.05size.1text.3xltext.smtext.xltext.xsweight.boldweight.semibold
LLM-Notizen
ui.price
Shop-Preiszeile: amount (Pflicht, fertig formatiert inkl. Währung), optional originalAmount (Streichpreis) und discount (Badge).
Hinweise
- Mit
originalAmountfärbt sich der Betrag automatisch über den themebaren Tokencolor.sale— kein Farb-Prop. - Beträge sind Content-Strings (Locale-Formatierung macht der Aufrufer/Daten-Service), keine Zahlen.
Beispiel-Node
{"definition": "ui.price", "props": {"amount": "9,49 €", "originalAmount": "24,99 €", "discount": "-62%"}}