Avatar

Représentation visuelle d'un utilisateur : photo, initiales ou icône par défaut. Supporte un indicateur de statut et le regroupement.

Exemple de base

Aminata Koudjo
<div class="bj-avatar">
  <img class="bj-avatar__img" src="https://i.pravatar.cc/100?img=3" alt="Aminata Koudjo" />
</div>

Tailles

AK
AK
AK
AK
<div class="bj-avatar bj-avatar--sm">
  <span class="bj-avatar__initials">AK</span>
</div>
<div class="bj-avatar">
  <span class="bj-avatar__initials">AK</span>
</div>
<div class="bj-avatar bj-avatar--lg">
  <span class="bj-avatar__initials">AK</span>
</div>
<div class="bj-avatar bj-avatar--xl">
  <span class="bj-avatar__initials">AK</span>
</div>

Variantes (initiales, icône, carré)

FK
Photo
<!-- Initiales -->
<div class="bj-avatar">
  <span class="bj-avatar__initials">FK</span>
</div>
<!-- Icône -->
<div class="bj-avatar">
  <i class="ri-user-line bj-avatar__icon" aria-hidden="true"></i>
</div>
<!-- Carré -->
<div class="bj-avatar bj-avatar--square">
  <img class="bj-avatar__img" src="https://i.pravatar.cc/100?img=5" alt="Photo" />
</div>

Carré × tailles

<div class="bj-avatar bj-avatar--square bj-avatar--sm">…</div>
<div class="bj-avatar bj-avatar--square">…</div>
<div class="bj-avatar bj-avatar--square bj-avatar--lg">…</div>
<div class="bj-avatar bj-avatar--square bj-avatar--xl">…</div>

Contenu × tailles

smmdlgxlImage
Portrait
Portrait
Portrait
Portrait
Initiales
AK
AK
AK
AK
Icône
<!-- Même contenu (image, initiales, icône) en sm, md, lg, xl -->
<div class="bj-avatar bj-avatar--sm"><img class="bj-avatar__img" src="…" alt="…" /></div>
<div class="bj-avatar"><span class="bj-avatar__initials">AK</span></div>

Indicateur de statut

Photo
FK
MD
<div class="bj-avatar">
  <img class="bj-avatar__img" src="https://i.pravatar.cc/100?img=8" alt="Photo" />
  <span class="bj-avatar__status bj-avatar__status--online"></span>
</div>
<div class="bj-avatar">
  <span class="bj-avatar__initials">FK</span>
  <span class="bj-avatar__status bj-avatar__status--away"></span>
</div>
<div class="bj-avatar">
  <span class="bj-avatar__initials">MD</span>
  <span class="bj-avatar__status bj-avatar__status--busy"></span>
</div>
<div class="bj-avatar">
  <i class="ri-user-line bj-avatar__icon" aria-hidden="true"></i>
  <span class="bj-avatar__status bj-avatar__status--offline"></span>
</div>

Statut × tailles

AKEn ligne
AKEn ligne
AKEn ligne
AKEn ligne
<!-- Pastille en ligne pour chaque taille -->
<div class="bj-avatar bj-avatar--sm">
  <span class="bj-avatar__initials">AK</span>
  <span class="bj-avatar__status bj-avatar__status--online"></span>
</div>

Carré avec statut

PortraitEn ligne
PortraitAbsent
PortraitOccupé
PortraitHors ligne
<div class="bj-avatar bj-avatar--square">
  <img class="bj-avatar__img" src="…" alt="…" />
  <span class="bj-avatar__status bj-avatar__status--online"></span>
</div>

Groupe d'avatars

Utilisateur 1
Utilisateur 2
Utilisateur 3
+3
<div class="bj-avatar-group">
  <div class="bj-avatar">
    <img class="bj-avatar__img" src="https://i.pravatar.cc/100?img=1" alt="Utilisateur 1" />
  </div>
  <div class="bj-avatar">
    <img class="bj-avatar__img" src="https://i.pravatar.cc/100?img=2" alt="Utilisateur 2" />
  </div>
  <div class="bj-avatar">
    <img class="bj-avatar__img" src="https://i.pravatar.cc/100?img=3" alt="Utilisateur 3" />
  </div>
  <div class="bj-avatar">
    <span class="bj-avatar__initials">+3</span>
  </div>
</div>

Groupe avec tailles

Groupe sm

Membre 1
Membre 2
Membre 3
+2

Groupe lg

Membre 1
Membre 2
Membre 3
+2
<div class="bj-avatar-group">
  <div class="bj-avatar bj-avatar--sm">…</div>
  <div class="bj-avatar bj-avatar--sm">…</div>
</div>

Classes CSS

ClasseDescription
bj-avatarConteneur de base, cercle par défaut (2.5 rem).
bj-avatar--smPetit (1.75 rem).
bj-avatar--lgGrand (3.5 rem).
bj-avatar--xlTrès grand (5 rem).
bj-avatar--squareVariante carrée avec bords arrondis.
bj-avatar__imgImage à l'intérieur (object-fit: cover).
bj-avatar__initialsTexte d'initiales (fallback sans image).
bj-avatar__iconIcône Remix Icon (fallback générique).
bj-avatar__statusPastille de statut positionnée en bas à droite.
bj-avatar__status--onlineStatut en ligne (vert).
bj-avatar__status--awayStatut absent (jaune).
bj-avatar__status--busyStatut occupé (rouge).
bj-avatar__status--offlineStatut hors ligne (gris).
bj-avatar-groupGroupe d'avatars superposés.

Accessibilité

Utilisez alt sur <img> pour décrire la personne. Pour un avatar décoratif, alt="" et aria-hidden="true". L'indicateur de statut devrait être doublé d'un texte masqué (bj-sr-only) pour les lecteurs d'écran.