Ir al contenido principal

✂️ 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).
✂️ Nuevas utilidades para «cortar» esquinas en tarjetas