Rediseño de la app
Nueva navegación, modo oscuro y onboarding.
68 % completado
HTML + CSSCards
Proyecto con avatares del equipo
Los avatares apilados se separan al pasar el ratón y enseñan el nombre de cada persona en una etiqueta.
Ajustes
16px
1x
Código
<article class="uv-kta"><header><span class="tg">En curso</span><button type="button" class="mn" aria-label="Más opciones"><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>Rediseño de la app</h3><p class="ds">Nueva navegación, modo oscuro y onboarding.</p><div class="pb"><span><b>68 %</b> completado</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 días</span></footer></article>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
Ver todos: CardsDónde usarlo
Los tableros de proyectos y los paneles de agencias muestran quién trabaja en qué sin ocupar mucho espacio. Esta tarjeta apila avatares de color con iniciales y, al pasar el ratón o con el foco del teclado, se separan para que cada uno enseñe su nombre en una etiqueta. Una etiqueta de estado, una descripción, la barra de progreso y la fecha límite completan el resumen.
Los avatares son elementos de lista que reciben el foco, así que con teclado se leen todos los nombres. Cambia las iniciales por fotos y usa el color principal para la etiqueta y la barra.