Carné de socia
Club Alpino Cierzo
Lucía Ferrer
Nº 0427 · Desde 2019
Válido hasta 12/2027
HTML + CSSCards
Embroidered felt membership card
A felt member card with an embroidered patch and a running stitch that sews itself around the edge on hover.
Settings
16px
1x
Code
<article class="uvq07-knt"><svg class="sw" viewBox="0 0 300 190" aria-hidden="true"><defs><mask id="uvq07-knt-m"><path class="rv" d="M22 8H278A14 14 0 0 1 292 22V168A14 14 0 0 1 278 182H22A14 14 0 0 1 8 168V22A14 14 0 0 1 22 8Z" pathLength="1"/></mask></defs><path class="st" d="M22 8H278A14 14 0 0 1 292 22V168A14 14 0 0 1 278 182H22A14 14 0 0 1 8 168V22A14 14 0 0 1 22 8Z" mask="url(#uvq07-knt-m)"/></svg><div class="in"><span class="pt"><svg class="mo" viewBox="0 0 40 40" aria-hidden="true"><circle class="su" cx="28" cy="13" r="3.4"/><path class="mt" d="M5 30L15 15l5 7 4.5-5.5L35 30z"/><path class="sn" d="M15 15l-2.8 4.2 2.8-1 2.6 1.6z"/></svg><span class="qr" role="img" aria-label="Access QR code"><i class="on"></i><i class="on"></i><i></i><i></i><i></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i></i><i></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i></i><i class="on"></i><i class="on"></i><i class="on"></i><i></i><i></i><i class="on"></i><i></i><i></i><i></i><i class="on"></i><i></i><i></i><i class="on"></i><i></i><i></i><i class="on"></i><i class="on"></i><i class="on"></i><i></i><i class="on"></i><i></i><i></i><i></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i></i><i></i></span></span><div class="tx"><p class="k">Member card</p><h3>Club Alpino Cierzo</h3><p class="nm">Lucía Ferrer</p><p class="no">No. 0427 · Since 2019</p><div class="ft"><span>Valid until 12/2027</span><button type="button" aria-expanded="false" data-a="Show QR" data-b="Hide QR">Show QR</button></div></div></div></article>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
See all CardsWhere to use it
Textiles bring warmth that flat cards lack. This member card layers tiny radial dots into a felt texture, draws a satin-stitched patch with a conic gradient, and sews a dashed SVG stitch around the border through an animated mask each time you hover or focus it. A button swaps the mountain badge for a stitched QR code. It suits clubs, outdoor brands and loyalty programs.
The main color is the golden thread, the second the felt. Change the club name, member data and the mountain in the patch, and keep the card ratio so the stitch follows the edge.