Composants
Composants
Les composants sont les éléments réutilisables du Design System, conçus pour composer des interfaces cohérentes et accessibles.
Avatars
Fragments visuels utilisés dans les composants du Design System. Elles peuvent contenir des initiales, une icône, un chiffre ou une photo.
.app-avatar
Tailles
Base commune pour les formes rondes ou carrées. Les tailles sont définies par variantes.
.is-xs — 32×32
A1
.is-sm — 36×36
SM
.is-md — 40×40
LC
.is-lg — 48×48
CH
.is-xl — 70×70
42
.is-xxl — 70×70
LC
Signature HTML
<span class="app-avatar is-round is-md">
.is-round
Avatars utilisateurs
Forme ronde pour les utilisateurs. Les variantes couleur sont alignées sur les couleurs du Design System.
.is-primary-soft
AB
.is-secondary-soft
CD
.is-primary
PR
.is-accent
AC
.is-orange
OR
.is-lime
LM
.is-green
GR
.is-red
RD
.is-blue
BL
.is-gray
GY
.is-image
.is-rounded
Avatars groupes
Forme arrondie pour les groupes ou blocs visuels. Les variantes couleur suivent la même logique que .is-round.
.is-primary-soft
AB
.is-secondary-soft
CD
.is-primary
PR
.is-accent
AC
.is-orange
OR
.is-lime
LM
.is-green
GR
.is-red
RD
.is-blue
BL
.is-gray
GY
.is-image