Anatomie
Desktop
- Avatar
- Champs texte
- Caret
Variantes
Bouton de profil avec 4 éléments dans l’en-tête
- Lorsque ces éléments sont présents dans l'interface (logo, nom du site, barre de recherche, menu), le champ texte (nom et prénom de l'utilisateur) est limité à 20 caractères.
Champs texte : Nom prénom
- Nom et prénom en entier : Lorsque l’espace le permet, le nom complet de l'utilisateur est visible.
- Initiale du prénom et nom complet : Si le nom de l'utilisateur dépasse 20 caractères, seule l'initiale du prénom suivie du nom en entier est affichée.
- Nom tronqué : Dans les cas où le nom est particulièrement long, en plus de réduire le prénom à une initiale, le nom est tronqué et 3 points de suspensions s’affichent.
Tous les éléments sont présent dans l’en-tête
- l'avatar de l'utilisateur prend toute la place. Un tooltip est automatiquement ajouté affichant le nom et le prénom complets de l’utilisateur.
Composant Avatar
Le bouton profil fait appel au composant “Avatar”. Cet élément sert à représenter visuellement l'utilisateur. Par défaut on affiche un icone de profil, il y a plusieurs options avec : des initiales, une image personnalisée ou une icône.
Display
Il y trois type d’affichage : “full“ “minimal“ et “mobile“.
- Full / Complet : on affiche l’avatar le prénom nom et le caret.
- Minimal : seul l’avatar et le caret sont affichés.
- Mobile : seul l’avatar est affiché.
Mobile
Contrairement au desktop, le nom complet s’affiche au clique en version mobile.
États
Il y trois états différents : l’état par défaut, l’état de survol (hover) et l’état actif (active).
- Default : Avec un fond blanc.
- Hover : le fond se grise au survol
- Active : le fond et le texte passe en violet, et le caret passe en “expand less“