Modèle:Card

📚 Modèle:Card

✏️ Documentation 🎨 CSS

Description

Le modèle Card (carte) permet de créer des cartes visuelles élégantes avec image, titre, sous-titre et texte. Idéal pour mettre en avant du contenu sur la page d'accueil ou dans des sections spéciales.

Fonctionnalités

• 🖼️ Image pleine largeur en haut de la carte, taille configurable
• 🏷️ Badge personnalisable (ex: NOUVEAU, FEATURED)
• 📝 Support complet du wikitext dans le contenu
• 🎨 Compatible dark/light mode (skin Citizen)
• 📱 Responsive sur mobile et tablette
• ✨ Effet hover avec zoom sur l'image

Syntaxe

{{Card
|image=Nom_du_fichier.png
|size=800px
|badge=TEXTE
|title=Titre de la carte
|subtitle=Sous-titre optionnel
|text=Contenu avec '''wikitext'''
|link=Page de destination
|class=classe-css-optionnelle
}}

Paramètres

Paramètre	Description	Obligatoire	Exemple
image	Nom du fichier image (sans File:)	Non	Harlan_Libre_1.png
size	Taille maximale de l'image (par défaut 800px)	Non	800px
badge	Texte du badge affiché en haut à droite	Non	NOUVEAU, FEATURED
title	Titre principal de la carte	Non	Royaume de Nefald
subtitle	Sous-titre en gris	Non	La capitale du continent
text ou 1	Contenu de la carte (supporte le wikitext)	Non	Découvrez l'histoire...
link	Lien vers une page (appliqué à l'image et au titre)	Non	Royaume de Nefald
class	Classe CSS personnalisée	Non	ma-classe

Exemples

Carte complète

{{Card
|image= Nouvelle Aldeïha.png
|badge={{#fas:star}} Ville
|link=Nouvelle-Aldeïha
|title=Nouvelle-Aldeïha
|subtitle=Terre d'accueil des [[Pérégrin|pérégrins]]
|text={{GETSHORTDESC:Nouvelle-Aldeïha}}
}}

   
    Ville

Nouvelle-Aldeïha

Terre d'accueil des pérégrins

Île isolée en mer de Fendral, abritant un avant-poste administratif de l’Intendance

Carte avec wikitext

{{Card
|title=Premiers pas
|subtitle=Pour les nouveaux joueurs
|text=
Ce guide vous aidera à :
* Naviguer efficacement
* Trouver l'information
* [[Aide:Contribuer]] au contenu

Un paragraphe normal avec '''gras''' et ''italique''.
|link=Guide des nouveaux joueurs
}}

Premiers pas

Pour les nouveaux joueurs

Ce guide vous aidera à :

• Naviguer efficacement
• Trouver l'information
• Aide:Contribuer au contenu

Un paragraphe normal avec gras et italique.

Carte simple (sans image)

{{Card
|title=Annonce importante
|text=Le serveur sera en maintenance ce week-end.
}}

Annonce importante

Le serveur sera en maintenance ce week-end.

Carte avec syntaxe courte

Le paramètre 1 peut remplacer text :

{{Card
|title=Titre rapide
|1=Contenu court
}}

Utilisation en grille

Pour afficher plusieurs cartes côte à côte, utilisez la classe home-cards-grid :

<div class="home-cards-grid">
{{Card
|image=Image1.png
|title=Carte 1
|text=Description 1
}}

{{Card
|image=Image2.png
|title=Carte 2
|text=Description 2
}}

{{Card
|image=Image3.png
|title=Carte 3
|text=Description 3
}}
</div>

La grille s'adapte automatiquement :

• Desktop : 3 colonnes (ou plus selon la largeur)
• Tablet : 2 colonnes
• Mobile : 1 colonne

Personnalisation

Styles personnalisés

Le CSS se trouve dans Template:Card/styles.css et peut être modifié.

Variables CSS principales :

• --color-surface-1 : fond de la carte
• --color-progressive : couleur des liens et bordure hover
• --border-color-base : couleur de bordure

Classe CSS personnalisée

{{Card
|class=ma-carte-speciale
|title=Carte custom
}}

Puis dans votre CSS :

.ma-carte-speciale {
    border: 2px solid red;
}

Badges prédéfinis

Suggestions de badges courants :

• NOUVEAU / NEW
• FEATURED / VEDETTE
• POPULAIRE / POPULAR
• MISE À JOUR / UPDATED
• ÉVÉNEMENT / EVENT

Compatibilité

• ✅ Skin Citizen (recommandé)
• ✅ Mode clair/sombre automatique
• ✅ Mobile responsive
• ✅ Tous navigateurs modernes

Voir aussi

• Aide:Modèles - Guide des modèles MediaWiki

Catégories