Camille Martin
Profil compact utilisé pour identifier une personne dans une liste, un dashboard ou une zone de gestion.
Actif
Référent
Organismes
Organismes
Les organismes assemblent plusieurs composants pour former des zones d’interface structurantes et réutilisables.
Profile cards
Carte profil générique pour afficher une personne, un compte ou un contact dans une liste ou un dashboard.
Aperçu
Le modèle canonique affiche l’identité principale, une information secondaire, une description courte et des badges de statut.
.app-profile-card
Signature HTML
<article class="app-card app-profile-card">Usage
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.
- Afficher une personne dans une liste, un dashboard ou une zone de gestion.
- Associer un avatar, un titre, une méta-information et des statuts courts.
- Ajouter des actions uniquement si elles concernent directement le profil affiché.
- Préférer une description courte pour garder la carte scannable.
Structure recommandée
| É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. |
Structure HTML — carte profil
<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>Variantes
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.
avec actions
Nora Dubois
Équipe
.app-profile-card.is-compact
Alex Bernard
Interne
| 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. |
Audit WCAG
| 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. |
Recommandations d’usage
- Utiliser
aria-labelsur la carte si plusieurs cartes similaires sont affichées. - Mettre l’avatar décoratif en
aria-hidden="true"si le nom est déjà visible. - Ne pas placer plusieurs zones interactives ambiguës dans la carte sans libellé clair.
- Vérifier la navigation clavier lorsque la carte contient un dropdown ou des boutons.
À éviter
- Ne pas réutiliser
.app-profile-cardpour des objets non identitaires : préférer une card ou data list. - Ne pas recréer les styles de base de
.app-carddans le composant profil. - Ne pas transformer toute la carte en bouton si elle contient déjà des actions internes.
- Ne pas utiliser uniquement la couleur de l’avatar ou des badges pour transmettre un statut.
- Ne pas réintroduire d’anciennes classes produit dans le core.