En curso

Rediseño de la app

Nueva navegación, modo oscuro y onboarding.

68 % completado
  • LMLucía
  • JRJavier
  • ASAna
  • PGPablo
  • MCMarta
  • +3
5 días
HTML + CSSKarten

Projektkarte mit Team-Avataren

Gestapelte Avatare rücken beim Hover auseinander und zeigen den Namen jeder Person.

Einstellungen

16px
1x

Code

<article class="uv-kta"><header><span class="tg">In Arbeit</span><button type="button" class="mn" aria-label="Weitere Optionen"><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">Neue Navigation, Dunkelmodus und Onboarding.</p><div class="pb"><span><b>68 %</b> erledigt</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 Tage</span></footer></article>

Prompt für KI

Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.

Mehr aus Karten

Alle ansehen: Karten

Wofür du ihn nutzen kannst

Projektboards und Agentur-Dashboards zeigen auf wenig Platz, wer woran arbeitet. Diese Karte stapelt farbige Avatare mit Initialen, bei Hover oder Tastaturfokus rücken sie auseinander, damit jeder seinen Namen in einem Tooltip zeigt. Status-Tag, kurze Beschreibung, Fortschrittsbalken und Fälligkeit vervollständigen die Übersicht.

Die Avatare sind fokussierbare Listeneinträge, per Tastatur lassen sich also alle Namen lesen. Tausche die Initialen gegen Fotos und nutze die Hauptfarbe für Tag und Balken.