Ausstattungsfilter mit Symbolen
Sechs Ausstattungsmerkmale als Symbolkacheln zum An- und Abhaken, mit Live-Zähler der gewählten Filter.
Einstellungen
Code
<fieldset class="uv-fam"><legend>Leistungen</legend><div class="gr"><label><input type="checkbox" checked><span class="tl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.5 9a14 14 0 0 1 19 0M5.5 12.5a9.5 9.5 0 0 1 13 0M8.7 16a5 5 0 0 1 6.6 0"/><circle cx="12" cy="19" r=".9" fill="currentColor"/></svg><span class="nm">Wifi</span><b aria-hidden="true"></b></span></label><label><input type="checkbox"><span class="tl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.5 17c1.6 1.2 3.2 1.2 4.8 0s3.2-1.2 4.7 0 3.2 1.2 4.8 0 3.1-1.2 4.7 0M8 14V5.5a2 2 0 0 1 4 0M16 14V5.5a2 2 0 0 0-4 0M8 8.5h8M8 11.5h8"/></svg><span class="nm">Pool</span><b aria-hidden="true"></b></span></label><label><input type="checkbox"><span class="tl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3.5" y="3.5" width="17" height="17" rx="4"/><path d="M9.5 16.5v-9h3.2a2.7 2.7 0 0 1 0 5.4H9.5"/></svg><span class="nm">Parking</span><b aria-hidden="true"></b></span></label><label><input type="checkbox" checked><span class="tl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="6.5" cy="10" r="1.8"/><circle cx="10" cy="6" r="1.8"/><circle cx="14" cy="6" r="1.8"/><circle cx="17.5" cy="10" r="1.8"/><path d="M12 11.5c-2.6 0-5 3.6-5 5.6 0 1.6 1.4 2.4 2.8 2 1.5-.4 2.9-.4 4.4 0 1.4.4 2.8-.4 2.8-2 0-2-2.4-5.6-5-5.6z"/></svg><span class="nm">Haustiere</span><b aria-hidden="true"></b></span></label><label><input type="checkbox"><span class="tl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v18M4.2 7.5l15.6 9M4.2 16.5l15.6-9M9.5 4.5L12 7l2.5-2.5M9.5 19.5L12 17l2.5 2.5"/></svg><span class="nm">Klimaanlage</span><b aria-hidden="true"></b></span></label><label><input type="checkbox"><span class="tl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 3.5v7M5 3.5v4a2 2 0 0 0 4 0v-4M7 10.5v10M16.5 20.5v-17c-2.2 0-3.5 2.7-3.5 6.5 0 1.8.8 3 3.5 3"/></svg><span class="nm">Küche</span><b aria-hidden="true"></b></span></label></div><p class="ct"><span class="n"></span> <span>ausgewählt</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
Ferienwohnungen, Hotels, Coworking-Spaces und Fitnessstudios filtern nach Ausstattung, und Symbole machen die Liste schneller erfassbar als einfache Checkboxen. Jede Kachel verbindet ein Liniensymbol mit einem kurzen Namen. Beim Anhaken färbt sie sich, das Symbol bekommt Farbe und ein kleiner Haken erscheint in der Ecke. Ein CSS-Zähler darunter zeigt die Anzahl.
Die Kacheln sind native Checkboxen in einem Fieldset, sie funktionieren also mit Formularen, Tastatur und Screenreadern. Tausche Symbole und Namen im Code und halte die Texte kurz.