Avatar
Benutzer-Avatar
Die Avatar-Komponente zeigt Benutzer-Avatare mit verschiedenen Größen und Optionen an. Sie unterstützt animierte Hintergründe, Video-Avatare (nur in hero-Variante) und verschiedene Größen.
Codebeispiel
<Avatarsrc="/images/people/example.jpg"alt="Portrait von Max Mustermann"size="md"animatedBg={5}/>Parameter
| Bezeichner | Typ | Beschreibung | Default |
|---|---|---|---|
| src | string | Pfad zum Avatar-Bild | - |
| alt | string | Alt-Text für das Bild | 'Avatar' |
| size | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl' | 'hero' | number | Größe des Avatars | 'md' |
| isRaised | boolean | Avatar leicht anheben | false |
| isReversed | boolean | Avatar spiegeln | false |
| animatedBg | number | Nummer des animierten Hintergrunds (1-12) | 5 |
| backgroundImageUrl | string | URL für benutzerdefinierten Hintergrund | - |
| video | string | Video-Pfad (WebM) - nur in hero-Variante | - |
| videoHevc | string | Video-Pfad (HEVC MOV) - für Safari | - |
| useVideo | boolean | Video statt Bild verwenden (nur hero) | false |
| classes | object | CSS-Klassen-Overrides | {} |