Rediseño de la app
Nueva navegación, modo oscuro y onboarding.
68 % completado
HTML + CSSCards
Project card with team avatars
Stacked avatars spread apart on hover and show each person's name in a small label.
Settings
16px
1x
Code
<article class="uv-kta"><header><span class="tg">In progress</span><button type="button" class="mn" aria-label="More options"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="5" cy="12" r="1.3" fill="currentColor"/><circle cx="12" cy="12" r="1.3" fill="currentColor"/><circle cx="19" cy="12" r="1.3" fill="currentColor"/></svg></button></header><h3>App redesign</h3><p class="ds">New navigation, dark mode and onboarding.</p><div class="pb"><span><b>68 %</b> complete</span><i style="--p:68%"></i></div><footer><ul class="av"><li style="--c:#f97316;--i:0" tabindex="0"><span>LM</span><em>Lucía</em></li><li style="--c:#3b82f6;--i:1" tabindex="0"><span>JR</span><em>Javier</em></li><li style="--c:#10b981;--i:2" tabindex="0"><span>AS</span><em>Ana</em></li><li style="--c:#a855f7;--i:3" tabindex="0"><span>PG</span><em>Pablo</em></li><li style="--c:#ef4444;--i:4" tabindex="0"><span>MC</span><em>Marta</em></li><li class="mr" style="--i:5"><span>+3</span></li></ul><span class="due"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/></svg>5 days</span></footer></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
Project boards and agency dashboards show who is working on what without taking much space. This card stacks colored avatars with initials, and on hover or keyboard focus they slide apart so each one can show its name in a tooltip. A status tag, short description, progress bar and due date complete the overview.
Avatars are list items that can receive focus, so keyboard users can read every name. Swap initials for photos, and use the main color for the status tag and the progress bar.