1
Composants encadrés
Callout (composant existant)
Information importante
Ceci est un callout de type "info". Idéal pour des informations complémentaires qui enrichissent le contenu principal.
Attention
Ceci est un callout de type "warning". Utilisez-le pour attirer l'attention sur des points critiques.
Astuce
Ceci est un callout de type "success". Parfait pour des conseils positifs ou des bonnes pratiques.
TipBox (nouveau composant)
Astuce pratique
Les TipBox sont plus visuels que les Callouts. Utilisez-les pour des conseils concrets, des astuces ou des recommandations.
Bonne pratique
Les bonnes pratiques se démarquent avec un fond vert sauge et une icône de validation.
Erreur à éviter
Les erreurs à éviter sont clairement signalées en rouge/orange pour un impact visuel fort.
Conseil de pro
Les conseils professionnels utilisent la couleur terracotta pour se démarquer comme expertise premium.
KeyTakeaway (composant existant)
À retenir
- Les composants encadrés augmentent la lisibilité
- Ils créent des points de repos visuels
- Ils permettent de scanner rapidement le contenu
2
Listes stylisées
FeatureList - Avantages
Avantages
- Design cohérent avec la palette du site
- Icônes visuelles pour une lecture rapide
- Meilleure hiérarchie que les listes à puces standards
- Espace optimisé avec un fond coloré subtil
FeatureList - Inconvénients
Inconvénients
- Nécessite un import de composant
- Pas adapté pour des listes très longues
- Moins flexible que le markdown pur
3
Tableaux de comparaison
Comparaisons visuelles optimisées
Tableau HTML standard (avec CSS amélioré)
Les tableaux bénéficient maintenant d'un style automatique :
| Modèle | Prix | Capacité | Note |
|---|---|---|---|
| Arctic Z1 | 70€ | 2-15 kg | 9/10 |
| Ergotron LX | 120€ | 3.2-11.3 kg | 9.5/10 |
| Amazon Basics | 40€ | 2-7 kg | 6.5/10 |
ComparisonTable (composant avancé)
| Critère | Entrée de gamme | Milieu de gamme | Haut de gamme |
|---|---|---|---|
| Prix | 30-60€ | 60-120€ | 120-250€+ |
| Qualité | Correcte | Excellente | Premium |
| Durée de vie | 2-4 ans | 5-10 ans | 10+ ans |
QuickNav (navigation rapide)
Le composant QuickNav affiché en haut de cette page permet une navigation rapide dans les guides longs. Il est sticky sur desktop.
SectionHeader (en-têtes numérotés)
Les SectionHeader que vous voyez dans cette page (sections 1, 2, 3, 4) créent une hiérarchie visuelle forte avec :
- Numéro dans un badge coloré
- Ancre pour la navigation
- Séparateur visuel (bordure supérieure)
- Sous-titre optionnel
Highlight (citations mises en valeur)
"Un bon design n'est pas juste esthétique : il améliore la compréhension, la mémorisation et l'engagement de l'utilisateur."
La cohérence visuelle rassure l'utilisateur et renforce la crédibilité du contenu.
5
Conclusion
À retenir
- Utilisez TipBox pour des conseils concrets et visuels
- Préférez FeatureList pour les listes d'avantages/inconvénients
- Les tableaux markdown sont maintenant automatiquement stylisés
- ComparisonTable pour des comparaisons complexes avec colonne mise en valeur
- QuickNav et SectionHeader structurent les guides longs
Utilisation recommandée
Pour un guide complet, combinez QuickNav en début d'article, SectionHeader pour chaque grande partie, et alternez TipBox, FeatureList et tableaux pour varier le rythme visuel.