Referee card toast
The whistle blows and a yellow card rises from the pocket over the grass; tap it and it flips to show the player.
Settings
Code
<div class="uvq09-ref"><button type="button" class="fire">Show again</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="Show the booked player"><span class="fc fr"></span><span class="fc bk"><b>8</b><small>Pedri</small></span></button><span class="tx"><b>Yellow card</b><small>Minute 54 · tactical foul</small><small class="dt">Pedri, number 8. One more and he is off</small></span></div></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Toasts
See all ToastsWhere to use it
Match centre apps report bookings as one more line in a list, but a card held up on a striped pitch reads instantly. This toast lays a mowed grass pattern under a whistle with blinking sound lines, then a yellow card swings up from below and settles at a tilt. The card is a real button: pressing it flips it in 3D to show the shirt number and name.
The main color is the card, so red works for a sending off, and the second color is the grass. The flip uses aria-pressed and reveals an extra line in the status region; replace the player, minute and reason with your live data.