Nur CSS-Tailwind-CSS-Avatar für Profilbilder. Größen XS-XL, Gruppenstapelung und Online-/Offline-Statusanzeige. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack.
Avatar-Komponenten zeigen Benutzerprofilbilder oder Initialen in einem kompakten, anpassbaren Container an. Mit den benutzerdefinierten CSS-Eigenschaften von Frutjam erstellt, repräsentieren Avatare Benutzer, Mitwirkende oder Teammitglieder auf Ihrer Benutzeroberfläche. Das Avatar-System unterstützt Bilder und Text, verschiedene Größen, Farben, Formen, Statusanzeigen, Ringe und Gruppenanordnungen – ideal für Benutzerlisten, Kommentare, Teamanzeigen, Profilabschnitte und Messaging-Schnittstellen.
Nur CSS, kein JavaScript erforderlich. WCAG AA zugänglich und Framework-unabhängig – funktioniert mit Django, HTMX, Laravel, React und jedem Stack.
| Klasse | Typ | Beschreibung |
|---|---|---|
| avatar | Base | Runder Avatar-Container mit Initialen oder Bild |
| avatar-group | Modifikator | Überlappender Stapel mehrerer Avatare |
| avatar-ring | Modifikator | Fügt einen farbigen Ringrahmen um den Avatar hinzu |
| avatar-circle | Stil | Vollständig kreisförmige Form (Standard) |
| avatar-rounded | Stil | Abgerundete Rechteckform |
| avatar-square | Stil | Quadratische Form ohne Rundung |
| avatar-online | Stil | Grüne Online-Statusanzeige |
| avatar-away | Stil | Gelbe Abwesenheitsstatusanzeige |
| avatar-busy | Stil | Rote Besetztstatusanzeige |
| avatar-offline | Stil | Graue Offline-Statusanzeige |
| avatar-xs | Größe | Extra klein |
| avatar-sm | Größe | Klein |
| avatar-md | Größe | Mittel (Standard) |
| avatar-lg | Größe | Groß |
| avatar-xl | Größe | Extra groß |
| avatar-2xl | Größe | 2x extra groß |
| avatar-primary | Farbe | Primäre Designfarbe |
| avatar-secondary | Farbe | Sekundäre Themenfarbe |
| avatar-accent | Farbe | Akzentfarbe des Themas |
| avatar-neutral | Farbe | Neutrale Themenfarbe |
| avatar-info | Farbe | Semantische Infofarbe |
| avatar-success | Farbe | Semantische Erfolgsfarbe |
| avatar-warning | Farbe | Semantische Warnungsfarbe |
| avatar-error | Farbe | Semantische Fehlerfarbe |
| avatar-ring-primary | Farbe | Ring in Primärfarbe |
| avatar-ring-secondary | Farbe | Ring in Sekundärfarbe |
| avatar-ring-accent | Farbe | Ring in Akzentfarbe |
| avatar-ring-neutral | Farbe | Ring in neutraler Farbe |
| avatar-ring-info | Farbe | Ring in Infofarbe |
| avatar-ring-success | Farbe | Ring in Erfolgsfarbe |
| avatar-ring-warning | Farbe | Ring in Warnfarbe |
| avatar-ring-error | Farbe | Ring in Fehlerfarbe |
Grundlegende Verwendung
Erstellen Sie einfache Avatare mit Textinitialen oder Farben.
<div class="avatar">AB</div> |
<div className="avatar">AB</div> |
Avatar mit Bildern
Zeigen Sie Benutzerprofilfotos mit automatischer Bildanpassung und reaktionsfähiger Größenanpassung an.
1 2 3 4 5 6 7 8 9 10 11 | <div class="avatar avatar-sm"> <img src="https://cdn.frutjam.com/images/avatar-1.jpg?format=webp&width=32&height=32&face_crop=true" alt="Strawbery" loading="lazy" /> </div> <div class="avatar avatar-md"> <img src="https://cdn.frutjam.com/images/avatar-1.jpg?format=webp&width=40&height=40&face_crop=true" alt="Strawbery" loading="lazy" /> </div> <div class="avatar avatar-lg"> <img src="https://cdn.frutjam.com/images/avatar-1.jpg?format=webp&width=56&height=56&face_crop=true" alt="Strawbery" loading="lazy" /> </div> |
Avatar-Größen
Verwenden Sie Größenvarianten, um Avatare für verschiedene Kontexte von extraklein (xs) auf 2x-groß (2xl) zu skalieren.
1 2 3 4 5 6 | <div class="avatar avatar-xs avatar-primary">XS</div> <div class="avatar avatar-sm avatar-secondary">SM</div> <div class="avatar avatar-md avatar-accent">MD</div> <div class="avatar avatar-lg avatar-primary">LG</div> <div class="avatar avatar-xl avatar-secondary">XL</div> <div class="avatar avatar-2xl avatar-accent">2XL</div> |
Avatar-Farben
Wenden Sie Farbvarianten an, um Avatare nach Rolle, Team oder Status zu unterscheiden, wenn Sie keine Bilder verwenden.
1 2 3 4 5 6 7 8 | <div class="avatar avatar-md avatar-primary">A</div> <div class="avatar avatar-md avatar-secondary">B</div> <div class="avatar avatar-md avatar-accent">C</div> <div class="avatar avatar-md avatar-info">D</div> <div class="avatar avatar-md avatar-neutral">E</div> <div class="avatar avatar-md avatar-success">F</div> <div class="avatar avatar-md avatar-warning">G</div> <div class="avatar avatar-md avatar-error">H</div> |
Avatar-Formen
Wählen Sie je nach Designsystem zwischen kreisförmigen (Standard), abgerundeten oder quadratischen Formen.
1 2 3 | <div class="avatar avatar-lg avatar-circle avatar-primary">●</div> <div class="avatar avatar-lg avatar-rounded avatar-secondary">◇</div> <div class="avatar avatar-lg avatar-square avatar-accent">■</div> |
Avatar mit Initialen
Zeigen Sie Benutzerinitialen zur schnellen Identifizierung in Listen, Kommentarthreads und Teamabschnitten an.
1 2 3 4 | <div class="avatar avatar-sm avatar-primary">JD</div> <div class="avatar avatar-md avatar-secondary">AR</div> <div class="avatar avatar-lg avatar-accent">MS</div> <div class="avatar avatar-xl avatar-info">KL</div> |
Avatar mit Statusanzeige
Kombinieren Sie Avatare mit Statusabzeichen, um die Anwesenheit oder Verfügbarkeit des Benutzers anzuzeigen (online, offline, beschäftigt, abwesend).
1 2 3 4 5 6 7 | <div class="avatar avatar-md avatar-online avatar-primary">JD</div> <div class="avatar avatar-md avatar-offline avatar-secondary">AR</div> <div class="avatar avatar-md avatar-busy avatar-accent">MS</div> <div class="avatar avatar-md avatar-away avatar-info">KL</div> |
Avatar mit Ringrand
Fügen Sie dekorative Ringe um Avatare hinzu, um sie hervorzuheben, den Status hervorzuheben oder sie optisch zu trennen.
1 2 3 | <div class="avatar avatar-md avatar-ring avatar-ring-primary avatar-primary">A</div> <div class="avatar avatar-lg avatar-ring avatar-ring-secondary avatar-secondary">B</div> <div class="avatar avatar-xl avatar-ring avatar-ring-accent avatar-accent">C</div> |
Ringfarbvarianten
Wählen Sie Ringfarben unabhängig von den Avatar-Hintergrundfarben.
1 2 3 4 5 6 7 | <div class="avatar avatar-md avatar-ring avatar-ring-primary avatar-primary">A</div> <div class="avatar avatar-md avatar-ring avatar-ring-secondary avatar-secondary">B</div> <div class="avatar avatar-md avatar-ring avatar-ring-accent avatar-accent">C</div> <div class="avatar avatar-md avatar-ring avatar-ring-info avatar-info">D</div> <div class="avatar avatar-md avatar-ring avatar-ring-success avatar-success">E</div> <div class="avatar avatar-md avatar-ring avatar-ring-warning avatar-warning">F</div> <div class="avatar avatar-md avatar-ring avatar-ring-error avatar-error">G</div> |
Avatar-Gruppe
Stapeln Sie mehrere Avatare mit automatischem negativen Rand für eine überlappende Anzeige von Teammitgliedern und Mitarbeitern.
1 2 3 4 5 6 | <div class="avatar-group"> <div class="avatar avatar-md avatar-primary">A</div> <div class="avatar avatar-md avatar-secondary">B</div> <div class="avatar avatar-md avatar-accent">C</div> <div class="avatar avatar-md avatar-info">D</div> </div> |
Avatar-Gruppe mit unterschiedlichen Größen
Kombinieren Sie mehrere Größen innerhalb einer Gruppe für eine visuelle Hierarchie.
1 2 3 4 5 | <div class="avatar-group"> <div class="avatar avatar-sm avatar-primary">A</div> <div class="avatar avatar-md avatar-secondary">B</div> <div class="avatar avatar-lg avatar-accent">C</div> </div> |
Avatar-Gruppe mit Status
Zeigen Sie den Verfügbarkeitsstatus für jedes Mitglied in einer Teamgruppe an.
1 2 3 4 5 | <div class="avatar-group"> <div class="avatar avatar-md avatar-online avatar-primary">A</div> <div class="avatar avatar-md avatar-offline avatar-secondary">B</div> <div class="avatar avatar-md avatar-busy avatar-accent">C</div> </div> |
Kombinierte Varianten
Kombinieren Sie Größe, Farbe, Form, Status und Ringmodifikatoren für komplexe Avatar-Anzeigen.
1 2 3 4 5 | <div class="avatar avatar-xl avatar-rounded avatar-ring avatar-ring-success avatar-success avatar-online">SK</div> <div class="avatar avatar-lg avatar-square avatar-ring avatar-ring-primary avatar-primary">AB</div> <div class="avatar avatar-2xl avatar-circle avatar-ring avatar-ring-error avatar-error avatar-busy">MR</div> |
Verwenden Sie Claude Code, Cursor oder einen anderen KI-Editor?
Cherry MCP stellt Ihrem KI-Editor bei Bedarf die genauen Avatar-Klassennamen und -Strukturen zur Verfügung. Keine halluzinierten Klassen mehr.