Avatar Component
CSS-only Tailwind CSS avatar for profile images. Sizes xs–xl, group stacking, and online/offline status indicator. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
Les composants d'avatar affichent des images de profil utilisateur ou des initiales dans un conteneur compact et personnalisable. Construits avec les propriétés personnalisées CSS de Frutjam, les avatars représentent les utilisateurs, les contributeurs ou les membres de l'équipe sur votre interface. Le système d'avatar prend en charge des images et du texte, plusieurs tailles, couleurs, formes, indicateurs d'état, anneaux et dispositions de groupe, ce qui est idéal pour les listes d'utilisateurs, les commentaires, les affichages d'équipe, les sections de profil et les interfaces de messagerie.
CSS uniquement, aucun JavaScript requis. WCAG AA accessible et indépendant du framework – fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
| Classe | Taper | Description |
|---|---|---|
| avatar | Base | Conteneur d'avatar circulaire avec initiales ou image |
| avatar-group | Modificateur | Pile superposée de plusieurs avatars |
| avatar-ring | Modificateur | Ajoute une bordure en anneau colorée autour de l'avatar |
| avatar-circle | Style | Forme entièrement circulaire (par défaut) |
| avatar-rounded | Style | Forme de rectangle arrondi |
| avatar-square | Style | Forme carrée sans arrondi |
| avatar-online | Style | Indicateur d'état en ligne vert |
| avatar-away | Style | Indicateur d'état d'absence jaune |
| avatar-busy | Style | Indicateur d'état occupé rouge |
| avatar-offline | Style | Indicateur d'état hors ligne gris |
| avatar-xs | Taille | Très petit |
| avatar-sm | Taille | Petit |
| avatar-md | Taille | Moyen (par défaut) |
| avatar-lg | Taille | Grand |
| avatar-xl | Taille | Très grand |
| avatar-2xl | Taille | 2x très grand |
| avatar-primary | Couleur | Couleur du thème principal |
| avatar-secondary | Couleur | Couleur du thème secondaire |
| avatar-accent | Couleur | Couleur du thème d'accentuation |
| avatar-neutral | Couleur | Couleur du thème neutre |
| avatar-info | Couleur | Couleur sémantique de l'information |
| avatar-success | Couleur | Couleur sémantique du succès |
| avatar-warning | Couleur | Couleur sémantique d’avertissement |
| avatar-error | Couleur | Couleur sémantique des erreurs |
| avatar-ring-primary | Couleur | Bague en couleur primaire |
| avatar-ring-secondary | Couleur | Bague en couleur secondaire |
| avatar-ring-accent | Couleur | Bague en couleur d'accent |
| avatar-ring-neutral | Couleur | Bague de couleur neutre |
| avatar-ring-info | Couleur | Bague en couleur info |
| avatar-ring-success | Couleur | Bague couleur succès |
| avatar-ring-warning | Couleur | Bague de couleur d'avertissement |
| avatar-ring-error | Couleur | Bague en couleur d'erreur |
Utilisation de base
Créez des avatars simples avec des initiales de texte ou des couleurs.
<div class="avatar">AB</div> |
<div className="avatar">AB</div> |
Avatar avec images
Affichez les photos de profil utilisateur avec un ajustement automatique de l’image et un dimensionnement réactif.
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> |
Tailles des avatars
Utilisez des variantes de taille pour faire évoluer les avatars de très petit (xs) à 2x-large (2xl) pour différents contextes.
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> |
Couleurs des avatars
Appliquez des variantes de couleurs pour différencier les avatars par rôle, équipe ou statut lorsque vous n'utilisez pas d'images.
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> |
Formes d'avatars
Choisissez parmi des formes circulaires (par défaut), arrondies ou carrées pour correspondre à votre système de conception.
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 avec initiales
Affichez les initiales des utilisateurs pour une identification rapide dans les listes, les fils de commentaires et les sections d'équipe.
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 avec indicateur de statut
Combinez des avatars avec des badges de statut pour afficher la présence ou la disponibilité des utilisateurs (en ligne, hors ligne, occupé, absent).
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 avec bordure en anneau
Ajoutez des anneaux décoratifs autour des avatars pour mettre l’accent, mettre en valeur le statut ou séparer visuellement.
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> |
Variantes de couleurs de bague
Choisissez les couleurs des anneaux indépendamment des couleurs d'arrière-plan de l'avatar.
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> |
Groupe d'avatars
Empilez plusieurs avatars avec une marge négative automatique pour un affichage superposé des membres de l'équipe et des collaborateurs.
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> |
Groupe d'avatars avec différentes tailles
Combinez plusieurs tailles au sein d’un groupe pour une hiérarchie visuelle.
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> |
Groupe d'avatar avec statut
Afficher l'état de disponibilité de chaque membre d'un groupe d'équipe.
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> |
Variantes combinées
Mélangez et associez les modificateurs de taille, de couleur, de forme, de statut et d'anneau pour des affichages d'avatar complexes.
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> |