Les badges sont de petites étiquettes colorées posées sur la vignette d’une carte. Elles guident le regard et aident vos visiteurs à comprendre en un clin d’œil qu’un contenu est nouveau, important, en test, etc.
Badges courants et usages recommandés
- Nouveau : tout ajout récent que vous souhaitez mettre en avant.
- Mis à jour : un document déjà connu mais amélioré (nouvelle version).
- Coup de cœur (⭐) : un contenu incontournable pour démarrer.
- Bêta (🧪) : un document en test, susceptible de changer.
- Gratuit / Libre (OSS) : pour signaler l’accès libre ou open source.
- Types (PDF, Image, Vidéo, Audio, Archive, Texte/MD, Script) : utiles si vous avez un mélange de formats.
Exemple 1 — simple (badges “pré-définis”)
{
"title": "Guide d’adhésion",
"url": "./pdfs/Guide-adhesion.pdf",
"type": "pdf",
"badges": ["new", "star"]
}
Ici, “Nouveau” + “Coup de cœur” met le document en avant.
Exemple 2 — personnalisé (couleur et libellé sur mesure)
{
"title": "Pack ateliers",
"url": "./zips/pack-ateliers.zip",
"type": "zip",
"badges": [
{ "variant": "custom", "label": "Premium", "emoji": "💎", "color": "#ff0077" }
]
}
Utile si vous avez une catégorie maison (ex. “Premium”, “Essentiel”, “Interne”).
Bonnes pratiques
- Peu, mais bien choisis : 1 ou 2 badges par carte suffisent.
- Cohérents : utilisez “Nouveau” pendant quelques semaines, puis retirez-le.
- Utiles : “Coup de cœur” pour orienter les débutants, “Bêta” pour prévenir.
- Lisibles : évitez d’empiler trop d’étiquettes ou des libellés trop longs.
À retenir
- Les badges sont des repères visuels.- Préférez 1–2 badges clairs plutôt qu’une constellation.- Vous pouvez rester standard (Nouveau, Bêta…) ou personnaliser (libellé + couleur).