Modèle:MiniCard

📚 Modèle:MiniCard

✏️ Documentation 🎨 CSS

Description

Le modèle MiniCard crée des boutons élégants et cliquables avec une image de fond floue. Il est conçu pour créer des menus de navigation visuels et attractifs vers les pages internes du wiki.

Caractéristiques

• Image de fond avec effet de flou artistique
• Overlay sombre pour améliorer la lisibilité du texte
• Animation au survol (élévation et ombre portée)
• Optimisé pour les liens internes (pages wiki)
• Responsive (adapté aux mobiles)
• Possibilité d'utilisation sans image

Syntaxe

{{MiniCard
|link=
|text=
|image=
|size=
}}

Paramètres

Paramètre	Description	Requis	Exemple
link	Titre de la page wiki de destination	Non (optionnel)	Accueil ou Guide du maraud
text	Texte affiché sur le bouton	Oui (recommandé)	Page d'accueil
image	Nom du fichier image (sans Fichier:)	Non (optionnel)	Home.png
size	Taille de l'image (défaut: 250px)	Non (optionnel)	250px

Notes sur les paramètres

• link : Si vide, la carte ne sera pas cliquable. Doit être un titre de page wiki valide.
• text : Si vide, le contenu de "link" sera affiché comme texte.
• image : Si absent, un fond gris dégradé par défaut sera appliqué.

Exemples d'utilisation

Carte basique avec image

{{MiniCard|link=Accueil|text=Page d'accueil|image=Home.png}}

Page d'accueil

Sans texte personnalisé

Le nom de la page sera utilisé comme texte :

{{MiniCard|link=Géographie|image=Map.png}}

Géographie

Sans image (fond gris)

{{MiniCard|link=Guide du maraud|text=Guide complet}}

Guide complet

Sans lien (texte statique)

{{MiniCard|text=Information}}

Information

Grille de cartes

Pour afficher plusieurs cartes côte à côte avec espacement automatique :

<div class="minicard-grid">
{{MiniCard|link=Accueil|text=Accueil|image=Home.png}}
{{MiniCard|link=Géographie|text=Géographie|image=Map.png}}
{{MiniCard|link=Histoire|text=Histoire|image=Book.png}}
{{MiniCard|link=Communauté|text=Communauté|image=Users.png}}
</div>

Accueil

Géographie

Histoire

Fichier:Users.png

Communauté

Cas d'usage

Navigation principale

Créer un menu visuel sur la page d'accueil :

<div class="minicard-grid">
{{MiniCard|link=Accueil|text=Accueil|image=Home.png}}
{{MiniCard|link=Règles|text=Règles|image=Rules.png}}
{{MiniCard|link=Actualités|text=Actualités|image=News.png}}
{{MiniCard|link=Aide|text=Aide|image=Help.png}}
</div>

Menu de catégorie

Organiser les sous-pages d'une catégorie :

== Transports ==
<div class="minicard-grid">
{{MiniCard|link=Transport:Train|text=Train|image=Train.png}}
{{MiniCard|link=Transport:Bateau|text=Bateau|image=Boat.png}}
{{MiniCard|link=Transport:Avion|text=Avion|image=Plane.png}}
{{MiniCard|link=Transport:Voiture|text=Voiture|image=Car.png}}
</div>

Portail thématique

Créer des portails avec sections organisées :

== Géographie ==
<div class="minicard-grid">
{{MiniCard|link=Continents|text=Continents|image=World.png}}
{{MiniCard|link=Villes|text=Villes|image=City.png}}
{{MiniCard|link=Monuments|text=Monuments|image=Monument.png}}
</div>

== Histoire ==
<div class="minicard-grid">
{{MiniCard|link=Chronologie|text=Chronologie|image=Timeline.png}}
{{MiniCard|link=Événements|text=Événements|image=Event.png}}
{{MiniCard|link=Personnages|text=Personnages|image=Person.png}}
</div>

Navigation en pied de page

Ajouter des liens connexes en bas d'article :

== Voir aussi ==
<div class="minicard-grid">
{{MiniCard|link=Page connexe 1|image=Related1.png}}
{{MiniCard|link=Page connexe 2|image=Related2.png}}
{{MiniCard|link=Page connexe 3|image=Related3.png}}
</div>

Personnalisation

Modifier l'apparence

Pour personnaliser le style global, éditez Modèle:MiniCard/styles.css.

Exemples de modifications courantes

Changer la taille des boutons :

.minicard {
    min-width: 180px;  /* Largeur minimale */
    height: 60px;      /* Hauteur fixe */
    padding: 0 25px;   /* Espacement interne */
}

Modifier l'intensité du flou :

.minicard-background img {
    filter: blur(8px) brightness(0.3);  /* Flou plus fort, plus sombre */
}

Changer la couleur de fond par défaut (sans image) :

.minicard--no-image {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

Modifier l'effet de survol :

a:hover .minicard,
.minicard:hover {
    transform: translateY(-4px) scale(1.02);  /* Plus d'élévation */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

Ajuster l'espacement dans la grille :

.minicard-grid {
    gap: 16px;  /* Espacement entre les cartes */
}

Bonnes pratiques

Choix des images

• Format : PNG (transparent) ou JPG
• Taille : 400×400px minimum pour un bon rendu flou
• Poids : < 200 Ko (optimiser avec des outils de compression)
• Contenu : Images avec bon contraste et sujet reconnaissable
• Style : Cohérence visuelle entre toutes les images d'une même section

Rédaction du texte

• **Court et descriptif** : 10-20 caractères idéalement
• **Clair** : éviter les abréviations obscures
• **Action** : privilégier des verbes ("Découvrir", "Explorer") ou des noms clairs
• **Cohérence** : même niveau de formalité sur toutes les cartes

Accessibilité

• Toujours fournir un texte via le paramètre text
• Utiliser des images avec bon contraste
• Éviter les textes trop longs qui débordent
• Tester sur mobile (responsive automatique)

Performance

• Limiter à 8-12 cartes maximum par section
• Optimiser les images avant upload (compression, redimensionnement)
• Regrouper les cartes dans des `
  ` pour un meilleur rendu

Organisation

• Regrouper par thématique avec des titres de section
• Ordre logique (alphabétique, chronologique, ou par importance)
• Éviter de mélanger cartes avec/sans images dans une même grille

Limitations

• ❌ Ne supporte PAS les liens externes (https://, http://)
• ❌ Les liens interwiki ne fonctionnent pas
• ❌ Les ancres (#section) peuvent causer des problèmes d'affichage
• ✅ Fonctionne uniquement avec les pages internes du wiki

Pour les liens externes

Si vous avez besoin de liens externes (Discord, réseaux sociaux, sites partenaires), utilisez plutôt :

• Des liens classiques avec icônes
• Le modèle Modèle:Tlx (si disponible)
• Une liste à puces stylisée

Dépannage

Problème	Solution
L'image ne s'affiche pas	Vérifiez que le fichier existe et que le nom est correct (sensible à la casse)
Le lien ne fonctionne pas	Assurez-vous que la page de destination existe
Le texte déborde du bouton	Réduisez la longueur du texte ou modifiez le CSS
Les cartes ne s'alignent pas	Utilisez ` ` pour les regrouper
L'effet de flou est trop/pas assez fort	Modifiez la valeur `blur()` dans le CSS

Voir aussi

• Modèle:Infobox - Pour créer des encadrés d'information
• Aide:Modèles - Guide général sur l'utilisation des modèles