Stoffmusterbuch als Filter
Stoffproben mit Zackenrand und echter Textur: Leinen, Wolle, Cord, Seide, Denim und Baumwolle zum Anhaken.
Einstellungen
Code
<fieldset class="uvq05-fb"><legend>Stoff</legend><div class="gr"><label style="--r:-3deg"><input type="checkbox"><span class="sh"><span class="sw"></span><b class="tg" aria-hidden="true"></b></span><span class="nm">Leinen</span></label><label style="--r:2deg"><input type="checkbox" checked><span class="sh"><span class="sw"></span><b class="tg" aria-hidden="true"></b></span><span class="nm">Wolle</span></label><label style="--r:-2deg"><input type="checkbox"><span class="sh"><span class="sw"></span><b class="tg" aria-hidden="true"></b></span><span class="nm">Cord</span></label><label style="--r:3deg"><input type="checkbox" checked><span class="sh"><span class="sw"></span><b class="tg" aria-hidden="true"></b></span><span class="nm">Seide</span></label><label style="--r:-1deg"><input type="checkbox"><span class="sh"><span class="sw"></span><b class="tg" aria-hidden="true"></b></span><span class="nm">Denim</span></label><label style="--r:2deg"><input type="checkbox"><span class="sh"><span class="sw"></span><b class="tg" aria-hidden="true"></b></span><span class="nm">Baumwolle</span></label></div><p class="ct"><span>Gewählte Stoffe:</span> <span class="n"></span></p></fieldset>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Filter
Alle ansehen: FilterWofür du ihn nutzen kannst
Mode-, Polster- und Möbelshops filtern oft nach Material, und eine Stoffprobe sagt mehr als ein Wort. Jedes Quadrat wird mit einem Zackenscheren-Polygon zugeschnitten und mit geschichteten CSS-Verläufen für Webart, Strick, Rippen oder Glanz texturiert. Gewählte Proben heben sich leicht schräg an, zeigen eine Naht und bekommen ein Etikett mit Haken.
Die erste Farbe markiert Haken und gewählte Namen, die zweite färbt das Etikett. Passe Farben und Verläufe jedes Stoffs im Code an dein Sortiment an und halte die Namen für kleine Bildschirme kurz.