Produkt-Grid

Responsives Grid aus Produkt-Karten (auto-fill) mit optionalem Sektions-Kopf — für Empfehlungen, Kategorien, Suchergebnisse

Im Builder nutzen

Nutzt: component.product-card

Beispiele

Empfehlungs-Grid aus Produkt-Karten

Empfehlungen

Das könnte dir auch gefallen

-62%

Spitzen-Set, 3-teilig9,49 €24,99 €(2.341)

Mesh-Bodysuit mit Gold-Detail12,99 €(812)

-45%

Satin-Set mit Strumpfhaltern11,49 €20,99 €(156)

Diamond-Mesh-Kimono14,99 €

Eigenschaften

Prop	Typ	Default	Builder-Label
kicker	string	""	Kicker
title	string	""	Titel
produkte *	array	—	Produkte (Props der Produkt-Karte)
spacing	string: none | sm | md | lg | xl	"none"	Eigenabstand

* 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
--grid-gap	var(--size-6)
--grid-min	var(--size-40)

Genutzte Design-Tokens

color.accentcolor.text.defaultfont.family.defaultfont.family.displayfont.family.monofont.leading.displayfont.size.displaysize.12size.4size.40size.6size.8text.smtracking.wideweight.bold