CP Registry

Avatar & AvatarGroup

Profil-Darstellung mit Bild oder deterministischem Initialen-Fallback. Ideal für Bearbeiter-Anzeigen in Förderanträgen, Mobilitäts-Sharing oder Backoffice-Listen.

Größen

Fünf Größen — von kompakter Kommentar-Liste bis zum Profil-Header.

Alle Größen mit Initialen-Fallback

Hintergrundfarbe wird deterministisch aus dem Namen generiert.

AB MS LK TR MK 
<Avatar name="Anna Bauer" size="xs" />
<Avatar name="Marc Schulz" size="sm" />
<Avatar name="Lena Koch" size="md" />
<Avatar name="Tobias Reuter" size="lg" />
<Avatar name="Marie Luise Koerber" size="xl" />

Status-Indikator

Vier Stati: online, abwesend, beschäftigt, offline. Bedeutung wird per aria-label ausgegeben.

Bearbeiter-Status im Antragssystem

AB MS LK TR 
<Avatar name="Anna Bauer" status="online" size="lg" />
<Avatar name="Marc Schulz" status="busy" size="lg" />
<Avatar name="Lena Koch" status="away" size="lg" />
<Avatar name="Tobias Reuter" status="offline" size="lg" />

AvatarGroup mit Ueberlauf

Für Sharing-Touren, Antrags-Bearbeiter oder Mitwirkende. Sichtbare Avatare + "+N"-Counter.

Sharing-Tour: 7 Teilnehmer, 4 sichtbar

AB MS LK TR +3 
<AvatarGroup max={4} size="md" total={7} label="Mitfahrende">
  <Avatar name="Anna Bauer" />
  <Avatar name="Marc Schulz" />
  <Avatar name="Lena Koch" />
  <Avatar name="Tobias Reuter" />
</AvatarGroup>

Antragsbearbeiter — kompakt

Kleine Größe für Tabellen-Zellen.

AB MS LK +2 
<AvatarGroup max={3} size="sm" total={5} label="Antragsbearbeiter">
  <Avatar name="Anna Bauer" />
  <Avatar name="Marc Schulz" />
  <Avatar name="Lena Koch" />
</AvatarGroup>

Form-Variante & Bilder

Quadratisch abgerundet — für App-Listen

AB MS 
<Avatar name="Anna Bauer" shape="rounded" size="lg" />
<Avatar name="Marc Schulz" shape="rounded" size="lg" status="online" />

Redakteurshinweise

Wann einsetzen

  • Antragsbearbeiter und Ansprechpersonen in Listen
  • Mitfahrende in Sharing-Touren der Mobilitäts-App
  • Kommentar- und Aktivitäten-Streams im Backoffice
  • Profil-Header mit Status (online/abwesend) im Mitarbeiter-Bereich

Inhalts-Empfehlungen

  • Vor- und Nachname als name — Initialen werden korrekt aus zwei Teilen gebildet
  • Bild nur wenn vorhanden und freigegeben — Initialen sind kein Mangel
  • AvatarGroup: total immer setzen, sonst kein "+N"-Counter
  • Status nur in interaktiven Systemen, nicht auf Marketingseiten

Mobile & A11y

  • Fallback-Initialen haben role="img" + aria-label mit dem Namen
  • Status hat aria-label mit Klartext (Online, Beschäftigt, ...)
  • AvatarGroup-"+N" hat aria-label "und N weitere"
  • Kontrast zwischen Initialen und Hintergrund ist Token-gepflegt — bitte nicht overriden

Pitfalls

  • Keine Avatare ohne Namen — Screen-Reader und Initialen-Fallback brauchen ihn
  • Keine sehr großen Profilbilder — xl ist die Obergrenze, alles drüber als eigenes Element
  • AvatarGroup nicht für Listen mit > 30 Personen — dort lieber einzelne Einträge
  • Status nicht zur reinen Dekoration einsetzen

Installation

cp-components add avatar