Camille Martin
Profil compact utilisé pour identifier une personne dans une liste, un dashboard ou une zone de gestion.
Les organismes assemblent plusieurs composants pour former des zones d’interface structurantes et réutilisables.
Carte profil générique pour afficher une personne, un compte ou un contact dans une liste ou un dashboard.
Le modèle canonique affiche l’identité principale, une information secondaire, une description courte et des badges de statut.
Profil compact utilisé pour identifier une personne dans une liste, un dashboard ou une zone de gestion.
<article class="app-card app-profile-card">Utiliser .app-profile-card lorsqu’une interface doit présenter une identité humaine ou assimilée : contact, membre, compte, auteur, référent ou collaborateur.
| Élément | Rôle |
|---|---|
.app-profile-card-main | Regroupe l’avatar et le contenu principal. |
.app-profile-card-avatar | Affiche l’initiale, l’icône ou l’image du profil via le composant avatar. |
.app-profile-card-title | Nom ou libellé principal du profil. |
.app-profile-card-meta | Information secondaire : rôle, localisation, statut temporel. |
.app-profile-card-description | Résumé optionnel, limité à une phrase courte. |
.app-profile-card-badges | Zone optionnelle pour statuts ou catégories. |
.app-profile-card-actions | Zone optionnelle pour actions contextuelles. |
<article class="app-card app-profile-card" aria-label="Profil de Camille Martin">
<div class="app-profile-card-main">
<span class="app-avatar app-profile-card-avatar is-rounded is-lg is-primary-soft" aria-hidden="true">CM</span>
<div class="app-profile-card-content">
<h3 class="app-profile-card-title">Camille Martin</h3>
<p class="app-profile-card-meta">Product designer</p>
<p class="app-profile-card-description">Description courte du profil.</p>
</div>
</div>
</article>
Les variantes restent limitées à la densité et à la composition. Les couleurs et statuts sont portés par les composants enfants, comme .app-avatar et .app-badge.
| Variante | Usage |
|---|---|
.app-profile-card | Carte standard avec contenu principal et informations complémentaires. |
.app-profile-card-actions | Composition avec actions contextuelles liées au profil. |
.is-compact | Version dense pour listes, sidebars ou zones à forte répétition. |
| Critère | Niveau | Constat | Condition |
|---|---|---|---|
| 1.3.1 Info and Relationships | A | La carte utilise un conteneur sémantique article et de vrais titres. | Conserver une hiérarchie de titres cohérente dans la page. |
| 1.4.1 Use of Color | A | Les statuts ne doivent pas dépendre uniquement de la couleur. | Les badges doivent garder un libellé textuel explicite. |
| 1.4.3 Contrast | AA | Les textes reposent sur les tokens de contraste du DS. | À revérifier si les tokens de marque sont remplacés. |
| 2.4.7 Focus Visible | AA | Les actions héritent du focus visible des boutons et dropdowns. | Ne pas supprimer les styles de focus sur les actions. |
| 4.1.2 Name, Role, Value | A | Les boutons d’action utilisent un nom accessible via aria-label. | Chaque action iconique doit avoir un nom explicite. |
aria-label sur la carte si plusieurs cartes similaires sont affichées.aria-hidden="true" si le nom est déjà visible..app-profile-card pour des objets non identitaires : préférer une card ou data list..app-card dans le composant profil.