Avatar 1.2.0

Zeige Profilbilder, Initialen oder Platzhalter mit .velin-avatar. Unterstuetzt fuenf Groessen, eine Statusanzeige, eine eckige Variante und gestapelte Avatar-Gruppen. English: Avatar

Reifegrad: In VelinStyle 1.2.0 als stabil dokumentiert. Design Intelligence (Plan / Review / Agent-Meta) ist separat und, wo angegeben, Beta / Grundlage.

Wann verwenden

Identitaetsmarker fuer Personen oder Objekte (Foto, Initialen oder Icon) mit .velin-avatar-Groessen.
Kompakte Praesenzanzeigen in Listen, Kommentaren oder Kontomenues.

Wann nicht verwenden

Gross hero imagery — use page media or a Card media block.
Status messaging — use Badge or Live dot alongside the avatar.

Einfaches Beispiel

<!-- Initials fallback -->
<span class="velin-avatar" data-velin-initials="AB"></span>

<!-- Image -->
<span class="velin-avatar">
  <img src="avatar.jpg" alt="User">
</span>

Groessen

<span class="velin-avatar velin-avatar--xs" data-velin-initials="XS"></span>
<span class="velin-avatar velin-avatar--sm" data-velin-initials="SM"></span>
<span class="velin-avatar" data-velin-initials="MD"></span> <!-- default -->
<span class="velin-avatar velin-avatar--lg" data-velin-initials="LG"></span>
<span class="velin-avatar velin-avatar--xl" data-velin-initials="XL"></span>
<span class="velin-avatar velin-avatar--2xl" data-velin-initials="2X"></span>

Statusanzeige

<span class="velin-avatar" data-velin-initials="ON">
  <span class="velin-avatar__status velin-avatar__status--online"></span>
</span>
<span class="velin-avatar" data-velin-initials="AW">
  <span class="velin-avatar__status velin-avatar__status--away"></span>
</span>
<span class="velin-avatar" data-velin-initials="BY">
  <span class="velin-avatar__status velin-avatar__status--busy"></span>
</span>

Avatar-Gruppe

<div class="velin-avatar-group">
  <span class="velin-avatar"><img src="user1.jpg" alt="User 1"></span>
  <span class="velin-avatar"><img src="user2.jpg" alt="User 2"></span>
  <span class="velin-avatar"><img src="user3.jpg" alt="User 3"></span>
  <span class="velin-avatar" data-velin-initials="+5"></span>
</div>

Barrierefreiheit

Gib fuer <img> in Avataren immer alt-Text an.
Fuege bei Avataren nur mit Initialen aria-label mit dem vollstaendigen Namen des Nutzers hinzu.
Statuspunkte sind dekorativ: kombiniere sie an anderer Stelle der Seite mit sichtbarem Text.

CSS-Variablen

Variable	Beschreibung
`--velin-color-primary-subtle`	Standard-Avatar-Hintergrund
`--velin-color-primary`	Standardfarbe fuer Avatar-Text/Initialen
`--velin-color-surface-bright`	Border & ring color
`--velin-radius-full`	Vollstaendig rund (Kreis)
`--velin-radius-md`	Radius der eckigen Variante
`--velin-color-success`	Online-Status
`--velin-color-warning`	Abwesend-Status
`--velin-color-danger`	Beschaeftigt-Status