Toast mit Schiedsrichterkarte
Die Pfeife ertönt und die Gelbe Karte kommt über dem Rasen aus der Tasche; antippen dreht sie um und zeigt den Spieler.
Einstellungen
Code
<div class="uvq09-ref"><button type="button" class="fire">Erneut zeigen</button><div class="tt" role="status"><span class="ws" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3.5 12.5a5 5 0 0 0 9.6 1.9l7.4-1.6V9.2H9.8"/><path d="M9.8 9.2V6.8h4.5v2.4"/><circle cx="8.5" cy="12.5" r="1.4"/></svg><i></i><i></i><i></i></span><button type="button" class="cd" aria-pressed="false" aria-label="Verwarnten Spieler zeigen"><span class="fc fr"></span><span class="fc bk"><b>8</b><small>Pedri</small></span></button><span class="tx"><b>Gelbe Karte</b><small>Minute 54 · taktisches Foul</small><small class="dt">Pedri, Nummer 8. Noch eine und er fliegt vom Platz</small></span></div></div>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 Toasts
Alle ansehen: ToastsWofür du ihn nutzen kannst
Spiel-Apps führen Verwarnungen meist als weitere Zeile in einer Liste, doch eine hochgehaltene Karte über dem Rasen versteht man sofort. Dieser Toast legt einen gestreift gemähten Rasen unter eine Pfeife mit blinkenden Schalllinien, dann schwingt die Gelbe Karte von unten hoch und bleibt schräg stehen. Die Karte ist ein echter Button: Ein Druck dreht sie in 3D und zeigt Rückennummer und Namen.
Die Hauptfarbe ist die Karte, in Rot taugt sie also für einen Platzverweis, die zweite Farbe ist der Rasen. Das Umdrehen nutzt aria-pressed und blendet eine weitere Zeile in der Statusregion ein; ersetze Spieler, Minute und Grund durch deine Live-Daten.