Styleguide UX/UI
Documentation des éléments graphiques du projet.
Typographie
Titre H1 (24px)
Titre H2 (20px)
Paragraphe Niveau 1 (16px) - Lorem ipsum dolor sit amet.
Paragraphe Niveau 2 (14px) - Consectetur adipiscing elit.
Paragraphe Niveau 3 (12px) - Sed do eiusmod tempor incididunt.
Spacing (Grille de 4px)
XS (4px)
SM (8px)
MD (16px)
ML (24px)
LG (32px)
XL (40px)
Exemple d'utilisation (.gap-md, .mb-lg)
Item 1
Item 2
Item 3
Boutons
Types
Tailles
États
Badges
Badge Primary
Défaut
Neutral
Info
Alert
Win
Loose
Badge Secondary
Défaut
Info
Alert
Win
Loose
Badge Extra
100
à gagner
+12 pts | 1050ème
Avatars
Types
Rounded
Circle
Placeholder
AB
Rounded
AB
Circle
Bordure Extérieure
Status (Online/Offline)
Avatar Stack
24px
+99
48px
+99
Modals
1. Title + Description + Actions
Titre de la modale
Ceci est une description de base pour expliquer le contexte de la modale.
2. Title + Description
Information importante
Veuillez prendre connaissance de cette information avant de continuer.
3. Full Content + Close Icon
Action requise
Voulez-vous vraiment effectuer cette action ? Elle est irréversible.
4. Title + Description + Close Icon
Notification
Votre profil a été mis à jour avec succès.
Cards
Coupe du monde 2026
Coupe du monde 2026
100
à gagner
Infos compétitions
Sélections disponibles
100
à gagner
Coupe du monde 2026
Phase de groupe - 1ère journée
+12 pts | 1050ème
+12.27
Coupe du monde 2026
Finale
Vous n'avez pas pronostiqué
Coupe du monde 2026
Phase de groupe - 1ère journée
Coupe du monde 2026
Finale
Carrousels
Call To Action (CTA)
Ceci est un lien CTAGrille (Bootstrap)
col-12
col-6
col-6
col-4
col-4
col-4
Autres éléments HTML
Listes
Non ordonnée (UL)
- Item 1
- Item 2
- Item 3
Ordonnée (OL)
- Premier
- Deuxième
- Troisième
Figure
