Design System
Playground Zur Vorlage

Elemente · MedienAvatar

Element · 6 Varianten

Avatar

elements/Avatar.astro

Quadrat, kein Kreis. Bild, Initialen in Mono, Fallback-Punkt, Status-Signal, Gruppe gestapelt, fünf Größen 24–64.

Notizen

  • Bestand: Team-Card setzt img size-12 direkt. Kein Element.
  • Radien-Regel: Fläche none. Avatar bleibt quadratisch, kein rounded-full, Bildmarke bleibt Bild.
  • Status-Punkt ist nw-signal (Oliv verfügbar, Granit-500 abwesend). Gruppe mit Ring in Flächenfarbe.

Props

Name Typ Default Notiz
variant "bild" | "initialen" | "fallback" | "status" | "gruppe" | "groessen" "bild" 01–06.
surface "nacht" | "paper" "nacht" Pflicht-Paar.
<Avatar variant="bild" surface="nacht" />

01 · Bild

48, object-cover

Team-Card. alt = Name.

Nacht

Daniel Schmidt

Paper

Daniel Schmidt

02 · Initialen

Mono auf Fond

Label. Zwei Zeichen.

Nacht

DS

Paper

DS

03 · Fallback

Punkt auf Fond

Signal. Kein Piktogramm-Mensch.

Nacht

Paper

04 · Status

Signal unten rechts

nw-signal. Ring in Flächenfarbe.

Nacht

Daniel Schmidt

Paper

Daniel Schmidt

05 · Gruppe

Gestapelt, +4

Shadcnblocks avatar-group, Anordnung. -ml-3, Ring 2.

Nacht

+4

Paper

+4

06 · Größen

24 · 32 · 40 · 48 · 64

Spacing-Leiter. Leiter-Werte.

Nacht

Paper