Rediseño de la app
Nueva navegación, modo oscuro y onboarding.
68 % completado
HTML + CSSCartes
Carte projet avec avatars de l'équipe
Les avatars empilés s'écartent au survol et affichent le nom de chaque personne dans une étiquette.
Réglages
16px
1x
Code
<article class="uv-kta"><header><span class="tg">En cours</span><button type="button" class="mn" aria-label="Plus d’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>Refonte de l’appli</h3><p class="ds">Nouvelle navigation, mode sombre et onboarding.</p><div class="pb"><span><b>68 %</b> terminé</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 jours</span></footer></article>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Cartes
Voir tout : CartesOù l’utiliser
Les tableaux de projets et les tableaux de bord d'agence montrent qui travaille sur quoi sans prendre de place. Cette carte empile des avatars colorés avec initiales ; au survol ou au focus clavier, ils s'écartent pour afficher chacun son nom dans une infobulle. Une étiquette de statut, une description, une barre de progression et l'échéance complètent l'aperçu.
Les avatars sont des éléments de liste focalisables, on lit donc tous les noms au clavier. Remplace les initiales par des photos et utilise la couleur principale pour l'étiquette et la barre.