Briefmarken als Versandoptionen
Jede Versandart ist eine Briefmarke mit gezähntem Rand: Bei der Wahl landet ein Poststempel mit Wellenlinien darauf.
Einstellungen
Code
<fieldset class="uvq04-pst2"><legend>Versand</legend><div class="op"><label style="--c:#2f7f73"><input type="radio" name="uvq04-pst2"><span class="sp"><span class="st"><span class="in"><em>2,90 €</em><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 18h13.5c2.5 0 4-1.6 4-3.6V12"/><circle cx="10" cy="12" r="5.2"/><path d="M10 12a2 2 0 1 1 2-2"/><path d="M18.5 12V7.5M20.5 12V8"/></svg></span></span><svg class="pm" viewBox="0 0 60 40" aria-hidden="true"><circle cx="20" cy="20" r="13"/><circle cx="20" cy="20" r="9.5"/><path d="M36 12q4-3 8 0t8 0t8 0M36 20q4-3 8 0t8 0t8 0M36 28q4-3 8 0t8 0t8 0"/></svg></span><span class="nm">Spar</span><small>5-7 Tage</small></label><label style="--c:#c98a2b"><input type="radio" name="uvq04-pst2" checked><span class="sp"><span class="st"><span class="in"><em>4,50 €</em><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M2.5 7h11v9h-11zM13.5 10h4l3 3v3h-7"/><circle cx="6.5" cy="17.5" r="1.8"/><circle cx="17" cy="17.5" r="1.8"/></svg></span></span><svg class="pm" viewBox="0 0 60 40" aria-hidden="true"><circle cx="20" cy="20" r="13"/><circle cx="20" cy="20" r="9.5"/><path d="M36 12q4-3 8 0t8 0t8 0M36 20q4-3 8 0t8 0t8 0M36 28q4-3 8 0t8 0t8 0"/></svg></span><span class="nm">Standard</span><small>2-3 Tage</small></label><label style="--c:#b23a3a"><input type="radio" name="uvq04-pst2"><span class="sp"><span class="st"><span class="in"><em>7,90 €</em><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M2.5 13.5l19-7-5.5 13-4-5z"/><path d="M12 14.5l9.5-8"/></svg></span></span><svg class="pm" viewBox="0 0 60 40" aria-hidden="true"><circle cx="20" cy="20" r="13"/><circle cx="20" cy="20" r="9.5"/><path d="M36 12q4-3 8 0t8 0t8 0M36 20q4-3 8 0t8 0t8 0M36 28q4-3 8 0t8 0t8 0"/></svg></span><span class="nm">Dringend</span><small>24 h</small></label></div></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 Radiobuttons
Alle ansehen: RadiobuttonsWofür du ihn nutzen kannst
Versandarten erscheinen als drei Briefmarken mit echter Zähnung aus einer CSS-Maske, jede mit Preis, Liniensymbol und gedeckter Vintage-Farbe. Wählst du eine, neigt sie sich leicht, und ein runder Poststempel mit Wellenlinien landet federnd darauf. Passend für Checkouts, Papeterien und jede Versandwahl, die etwas Charme verdient.
Die Hauptfarbe ist die Stempelfarbe, die Zweitfarbe das Markenpapier. Jede Marke holt ihre Farbe aus dem style-Attribut, stimme sie also auf deine Marke ab und halte Namen und Lieferzeit darunter kurz.