Lucía Martín
Diseñadora de producto
Tarjeta de perfil
Una tarjeta de persona cuyo avatar crece al pasar el ratón mientras aparecen los botones «Seguir» y «Mensaje».
Ajustes
Código
<div class="uv-kp"><div class="av">LM</div><h3>Lucía Martín</h3><p>Diseñadora de producto</p><div class="bt"><button>Seguir</button><button>Mensaje</button></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 Cards
Dónde usarlo
Esta tarjeta de perfil encaja en cualquier página que presente a personas: la sección de equipo de un estudio, la caja de autor al final de un post, un directorio de freelancers o los ponentes de un congreso. Muestra iniciales, nombre y cargo. Al pasar el ratón el avatar crece y aparecen dos botones, uno destacado y otro discreto.
Los botones están ocultos hasta el hover, así que en el móvil puede que nadie los vea. Si contactar con la persona es importante, muéstralos siempre. Cambia las iniciales por una foto real cuando la tengas: la tarjeta gana mucha calidez.