✂️ Nuevas utilidades para «cortar» esquinas en tarjetas
En uno de los proyectos en los que estoy trabajando me encontré con un detalle de diseño muy concreto: necesitaba poder «eliminar» (recortar) una esquina diferente en cada tarjeta, como en la captura.
La típica solución rápida sería hacerlo a medida en cada componente… pero como esto se repite más de lo que parece, he preferido hacerlo bien: he creado unas clases de utilidad para poder aplicar este efecto de forma consistente y reutilizable, sin depender de hacks puntuales.
✅ Qué permiten estas utilidades
- Elegir qué esquina se recorta (arriba-izq, arriba-der, abajo-izq, abajo-der)
- Mantener el efecto compatible con tarjetas reales (padding, border, background, hover, etc.)
- Poder usarlo tanto en layouts simples como en grids de tarjetas
🧠 Siguiente paso
Antes de publicarlo «tal cual», le voy a dar una pensada más profunda para dejarlo más estandarizado (nombres, tamaños, compatibilidad con tokens, escalas…) y así poder integrarlo dentro del sistema de diseño de Flowtitude como un patrón oficial, no como una solución aislada.
Cuando lo tenga redondo, comparto:
- las clases finales,
- ejemplos listos para copiar/pegar,
- y una mini guía de uso (cuándo sí / cuándo no).