«Ideas para el viaje a Oporto: librería Lello a primera hora y cena junto al río.»
Toast de papel plegado
El aviso llega doblado en tres como una carta y se despliega pliegue a pliegue, con sombra en cada doblez.
Ajustes
Código
<div class="uvq09-ori"><button type="button" class="fire">Mostrar de nuevo</button><div class="tt" role="status"><div class="p p1"><span class="av" aria-hidden="true">A</span><b>Ana ha compartido una nota contigo</b><div class="p p2"><p>«Ideas para el viaje a Oporto: librería Lello a primera hora y cena junto al río.»</p><div class="p p3"><button type="button" class="x">Más tarde</button><button type="button" class="op">Abrir nota</button></div></div></div></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
Una nota compartida se parece más a una carta cuando se despliega. Este toast son tres paneles de papel anidados: primero se ve la cabecera, después el panel central baja desde atrás con una rotación 3D y le sigue la franja de acciones, cada uno con una sombra que se va al quedar plano. Al cerrar se pliega en orden inverso. Va bien con documentos compartidos, mensajes e invitaciones discretas.
El color principal es el del avatar y el botón principal, y el secundario el del papel. Deja una idea por panel, título, vista previa y acciones, y ajusta los retrasos de las transiciones si añades o quitas un pliegue.