Template:Card: Difference between revisions

Latest revision as of 00:46, 4 September 2025

Card component of the main page.

TemplateData

Card component of the main page

Template parameters
This template prefers block formatting of parameters.
Parameter		Description	Type	Status
HTML class	`class`	HTML class(es) added to the container	String	optional
Background image	`image`	Background image of the card Example John Howe - Gollum.jpg	File	optional
Background image position	`imagePosition`	Position of the background image in the card Suggested values `top` `bottom` Default center Example top	String	optional
Background image width	`imageWidth`	Width of the background image Default 400 Example 300	Number	optional
Label	`label`	Label of the card Example Article	String	optional
Title	`title`	Title text of the card Example Túrin kills Beleg	String	optional
Caption	`caption`	Caption text of the card Example Túrin finally kills Beleg in a prolonged heroic battle.	String	optional
Content	`content`	HTML or wikitext used as content of the card	Content	optional
Link	`link`	Page name of the card that is linked to Example Gollum	Page name	optional
After image content	`afterImage`	HTML or wikitext used as content of the card. It is only used on cards with background image	Content	optional

@@ Line 1: / Line 1: @@
-Card component of the main page.
+<!--
-== TemplateData ==
+Template:Card
-<templatedata>
+--------------------
-{
+Create a card
-	"params": {
-		"class": {
+--><includeonly><!--
-			"label": "HTML class",
+--><templatestyles src="Template:Card/styles.css"/><!--
-			"description": "HTML class(es) added to the container",
+--><div
-			"type": "string"
+    class="tg-card {{{class|}}}"
-		},
+    style="
-		"image": {
+        {{#if:{{{imageColorR|}}}|--tg-card-image-color_r:{{{imageColorR}}};}}
-			"label": "Background image",
+        {{#if:{{{imageColorG|}}}|--tg-card-image-color_g:{{{imageColorG}}};}}
-			"description": "Background image of the card",
+        {{#if:{{{imageColorB|}}}|--tg-card-image-color_b:{{{imageColorB}}};}}
-			"example": "John Howe - Gollum.jpg",
+        {{#if:{{{height|}}}|min-height:{{{height}}};}}
-			"type": "wiki-file-name"
+    "><!--
-		},
+    -->{{#if:{{{header|}}}|<div class="tg-card-header">{{{header}}}</div>}}<!--
-		"imagePosition": {
+    Image wrapper is needed to content overlay effect
-			"label": "Background image position",
+    -->{{#if:{{{image|}}}|<div class="tg-card-image">}}<!--
-			"description": "Position of the background image in the card",
+        -->{{#if:{{{image|}}}|<div class="tg-card-background {{#if:{{{imagePosition|}}}|tg-card-background--{{{imagePosition}}}}}">[[File:{{{image}}}|{{{imageWidth|400}}}px|link=]]</div>}}<!--
-			"example": "top",
+        -->{{#if:{{{label|}}}|<div class="tg-card-label">{{#if:{{{labelpage|}}}|[[{{{labelpage}}}|{{{label}}}]]|<span>{{{label}}}</span>}}</div>}}<!--
-			"type": "string",
+        --><div class="tg-card-content"><!--
-			"suggestedvalues": [
+            -->{{#if:{{{title|}}}|<div class="tg-card-title">{{{title}}}</div>}}<!--
-				"top",
+            -->{{#if:{{{caption|}}}|<div class="tg-card-caption">{{{caption}}}</div>}}<!--
-				"bottom"
+            -->{{#if:{{{content|}}}|<div class="tg-card-body">{{{content}}}</div>}}<!--
-			],
+        --></div><!--
-			"default": "center"
+        -->{{#if:{{{link|}}}|<div class="tg-card-link">[[{{{link}}}]]</div>}}<!--
-		},
+    -->{{#if:{{{image|}}}|</div>}}<!--
-		"imageWidth": {
+    -->{{#if:{{{afterImage|}}}|<div class="tg-card-afterImage">{{{afterImage}}}</div>}}<!--
-			"label": "Background image width",
+    -->{{#if:{{{footer|}}}|<div class="tg-card-footer">{{{footer}}}</div>}}<!--
-			"description": "Width of the background image",
+--></div><!--
-			"example": "300",
+--></includeonly><!--
-			"type": "number",
+--><noinclude><!--
-			"default": "400"
-		},
+Template documentation
-		"label": {
+----------------------
-			"label": "Label",
-			"description": "Label of the card",
+-->{{/doc}}<!--
-			"example": "Article",
+--></noinclude>
-			"type": "string"
-		},
-		"title": {
-			"label": "Title",
-			"description": "Title text of the card",
-			"example": "Túrin kills Beleg",
-			"type": "string"
-		},
-		"caption": {
-			"label": "Caption",
-			"description": "Caption text of the card",
-			"example": "Túrin finally kills Beleg in a prolonged heroic battle.",
-			"type": "string"
-		},
-		"content": {
-			"label": "Content",
-			"description": "HTML or wikitext used as content of the card",
-			"type": "content"
-		},
-		"link": {
-			"label": "Link",
-			"description": "Page name of the card that is linked to",
-			"example": "Gollum",
-			"type": "wiki-page-name"
-		},
-		"afterImage": {
-			"label": "After image content",
-			"description": "HTML or wikitext used as content of the card. It is only used on cards with background image",
-			"type": "content"
-		}
-	},
-	"description": "Card component of the main page",
-	"format": "block"
-}
-</templatedata>