Toast de tarjeta del árbitro
Suena el silbato y la tarjeta amarilla sale del bolsillo sobre el césped; al pulsarla se da la vuelta y muestra al jugador.
Ajustes
Código
<div class="uvq09-ref"><button type="button" class="fire">Mostrar de nuevo</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="Ver el jugador amonestado"><span class="fc fr"></span><span class="fc bk"><b>8</b><small>Pedri</small></span></button><span class="tx"><b>Tarjeta amarilla</b><small>Minuto 54 · falta táctica</small><small class="dt">Pedri, dorsal 8. Una más y se va a la calle</small></span></div></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Toasts
Ver todos: ToastsDónde usarlo
Las apps de partidos cuentan las amonestaciones como una línea más, pero una tarjeta en alto sobre el césped se entiende al momento. Este toast pone un césped segado a franjas bajo un silbato con ondas que parpadean, y la tarjeta amarilla sube desde abajo y se queda inclinada. La tarjeta es un botón de verdad: al pulsarla gira en 3D y enseña dorsal y nombre.
El color principal es la tarjeta, así que en rojo sirve para una expulsión, y el secundario es el césped. El giro usa aria-pressed y muestra una línea más en la región de estado; cambia jugador, minuto y motivo por tus datos en directo.