« Modèle:Card » : différence entre les versions

Dernière version du 26 mai 2026 à 03:53

Fonctionnalité modifier

Permet d'afficher une carte illustré avec lien et description.

Paramètres modifier

custom_class = class CSS associé au container
image = illustration de la carte
title = titre de la carte
texte = texte/descriptif de la carte
bg-color = couleur de de fond la carte (par défaut: #000000)
bg-color-offset = espace depuis le haut de la carte avant que le dégradé de couleur commence (par défaut: 55%)
title-color = couleur du titre (par défaut: #ffffff) / valeur spéciale : warhammer
texte-color = couleur du texte (par défaut: #ffffff)
width = largeur de la carte (par défaut: 300px)
height = hauteur de la carte (par défaut: 450px)
link = lien lorsqu'on clique sur la carte (optionnel)

Exemples modifier

Royaume de Bretonnie modifier

{{Card
|image=Fichier:Image-Bretonnia.webp
|bg-color=#342c2c
|title=Royaume de Bretonnie
|texte=De puissants chevaliers s'élancent pour arracher la gloire au fil de l'épée et à la pointe de la lance.
|link=:Catégorie:La Bretonnie
}}

Royaume de Bretonnie

De puissants chevaliers s'élancent pour arracher la gloire au fil de l'épée et à la pointe de la lance.

Brise-Fer modifier

{{Card
|image=Fichier:Ironbreaker.jpg
|bg-color=#002337
|bg-color-offset=50%
|title-color=#cda400
|title=Brise-Fer
|texte=Les Brise-Fer sont des soldats d’élite spécialisés dans le combat en souterrain, qui cherchent à juguler l’avancé du mal et à protéger leur peuple.
|link=Brise-Fer
}}

Brise-Fer

Les Brise-Fer sont des soldats d’élite spécialisés dans le combat en souterrain, qui cherchent à juguler l’avancé du mal et à protéger leur peuple.

Les Drwarfs modifier

{{Card
|image=Fichier:Image-DwarvenMountainHolds.webp
|bg-color=#222737
|title-color=warhammer
|title=Forteresses Naines
|texte=Guerriers et ingénieurs aussi entêtés que brillants, ils font tout pour régler d'anciennes rancunes.
|link=:Catégorie:Nains
}}

Forteresses Naines

Guerriers et ingénieurs aussi entêtés que brillants, ils font tout pour régler d'anciennes rancunes.

Resize auto modifier

{{Card
|image=Fichier:Bestiaire.jpg
|bg-color=#fbe9b0
|title-color=warhammer
|title=Bestiaire
|title-size=20px
|width=240px
|height=360px
|link=:Catégorie:Bestiaire
}}

Bestiaire

@@ Ligne 1 : / Ligne 1 : @@
-<includeonly><div class="card-custom" style="position: relative; width: {{{width|300px}}}; height: {{{height|450px}}}; overflow: hidden;     border-radius: 1rem; box-shadow: 0 0 0 1px #00000012, 0px 0px 10px -5px black, 0px 5px 15px -10px black; background: {{{bg-color|black}}};">{{#if:{{{link|}}}
+<includeonly><div class="card-custom {{{custom_class|}}}" style="position: relative; width: {{{width|300px}}}; height: {{{height|450px}}}; overflow: hidden;     border-radius: 1rem; box-shadow: 0 0 0 1px #00000012, 0px 0px 10px -5px black, 0px 5px 15px -10px black; background: var(--bg-color); {{#if: {{{bg-color|}}} | --bg-color: {{{bg-color}}}; }} {{#if: {{{title-size|}}} | --title-size: {{{title-size}}}; }}">
+{{#if: {{{link|}}}
+| {{#if:{{{image|}}}
 | [[{{{image|}}}|{{{width|300px}}}|link={{{link}}}]]
-| <div style="pointer-events: none;">[[{{{image|}}}|{{{width|300px}}}]]</div>
+| [[{{{link|}}}]]{{#if:{{{image_item|}}} | <div class="image-item-wrapper" style="pointer-events: none; position: absolute; inset: 0 0 0 0; z-index: 1;">{{{image_item}}}</div>}}
 }}
-<div class="card-cutom-color" style="position: absolute; z-index: 2; inset: {{{bg-color-offset|55%}}} 0 0 0; background: linear-gradient(rgba(0, 0, 0, 0) 0%, {{{bg-color|black}}} 33%); padding: 1.5rem; text-align: center; color: #ffffff; pointer-events: none;">
+| {{#if:{{{image|}}}
+| <div style="pointer-events: none;">[[{{{image}}}|{{{width|300px}}}]]</div>
+| {{#if:{{{image_item|}}} | <div class="image-item-wrapper" style="pointer-events: none; position: absolute; inset: 0 0 0 0; z-index: 1;">{{{image_item}}}</div>}}
+}}
+}}<div class="card-custom-color" style="position: absolute; z-index: 2; bottom: 0; left: 0; right: 0;; background: linear-gradient(rgba(0, 0, 0, 0) 0%, var(--bg-color) 33%); padding: var(--title-spacing); text-align: center; color: #ffffff; pointer-events: none;">
 {{#ifeq: {{{title-color|}}} | warhammer
 |
 <div class="card-custom-title" style="
-     font-family: 'Spectral SC', serif;
+     font-family: {{#ifeq: {{{title-font|capitalized}}} | capitalized |'Spectral SC', serif | var(--font-family-citizen-serif) }};
      text-shadow: 0 0 2px black;
      letter-spacing: -0.5px;
-     font-size: {{{title-size|1.25rem}}};
+     font-size: var(--title-size);
-     margin-bottom: 1rem;
+     margin-bottom: {{{gap-bottom|1rem}}};
-     color: #fbca1b;
+     color: #dce2e6;
-     box-shadow: 0 1px #0000006b, 0 2px #882817, 0 3px 2px #00000070, 0 -1px #0000006b, 0 -2px #882817, 0 -3px #00000070;
+     box-shadow: 0 1px #0000006b, 0 2px #b18a3b, 0 3px 2px #00000070, 0 -1px #0000006b, 0 -2px #b18a3b, 0 -3px #00000070;
      padding: 0 5px;
      background: #16151582;
      font-weight: normal;
+    line-height: 1.3;
+    z-index: 1;
+    position: relative;
 ">{{{title}}}</div>
 | <div class="card-custom-title" style="
@@ Ligne 23 : / Ligne 32 : @@
      letter-spacing: -0.5px;
      font-weight: bold;
-     font-size: {{{title-size|1.25rem}}};
+     font-size: var(--title-size);
      margin-bottom: 1rem;
 ">{{#if:{{{link|}}} | [[{{{link}}}|<span style="color: {{{title-color|#fbca1b}}};">{{{title|}}}</span>]] | <span style="color: {{{title-color|#fbca1b}}};">{{{title|}}}</span> }}</div>}}
@@ Ligne 34 : / Ligne 43 : @@
 ==Paramètres==
+*'''custom_class''' = class CSS associé au container
 *'''image''' = illustration de la carte
 *'''title''' = titre de la carte
@@ Ligne 118 : / Ligne 128 : @@
+== Resize auto ==
+<pre>
+{{Card
+|image=Fichier:Bestiaire.jpg
+|bg-color=#fbe9b0
+|title-color=warhammer
+|title=Bestiaire
+|title-size=20px
+|width=240px
+|height=360px
+|link=:Catégorie:Bestiaire
+}}
+</pre>
+{{Card
+|image=Fichier:Bestiaire.jpg
+|bg-color=#fbe9b0
+|title-color=warhammer
+|title=Bestiaire
+|title-size=20px
+|width=240px
+|height=360px
+|link=:Catégorie:Bestiaire
+}}
 </noinclude>