Lucía Martín
Diseñadora de producto
Profile card with actions
A person card whose avatar grows on hover while “Follow” and “Message” buttons slide into view.
Settings
Code
<div class="uv-kp"><div class="av">LM</div><h3>Lucía Martín</h3><p>Product designer</p><div class="bt"><button>Follow</button><button>Message</button></div></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Cards
Where to use it
This profile card suits any page that introduces people: the team section of a studio, the author box under a blog post, a directory of freelancers or the speaker list of a conference. It shows initials, a name and a role. On hover the avatar grows a little and two buttons appear, one bold and one quiet.
The buttons stay hidden until hover, so phone users may never see them. If contacting the person matters, show the buttons all the time. Replace the initials with a real photo when you have one, it makes the card far warmer.