Template:Card: Difference between revisions

Latest revision as of 21:08, 6 May 2021

Template documentation[view][edit][history][purge]

This documentation is transcluded from Template:Card/doc. Changes can be proposed in the talk page.

{{Card}} is a template for generating a single card. It is typically used with Template:Cards to create a grid or row layout on a page.

Parameters

Content parameters

column: The number of cards which should fit on a single row (max 6)
title: The title text on the card
text: The content text on the card
bottom: The text on the bottom section of the card. Usually used for actionable items like links.
page: The page linked by the button on the card. Only use it when there is only one action.
pagetext: The text displayed on the button on the card
bylinetop: The byline text above the title on the card
bylinebottom: The byline text below the title on the card

Styling parameters

colorbg: The background color of the card
colortext: The text color of the card
colorbyline: The color of the byline on the card
colortitle: The color of the title on the card
colorbgbottom: The background color of the bottom section of the card
colorbottom: The text color in the bottom section of the card
colorbgbutton: The background color of the button on the card, note that due to templating restrictions, the button text will always be grey. Please ensure there is enough contrast between the background color and the text.

== See also ==

This template is a template for generating a card, usually used in combination with the Cards template to create a grid or row layout on a page. Currently only a maximum of six cards are supported in Visual Editing, please refer to the template page for advanced syntax.

Template parameters
This template prefers block formatting of parameters.
Parameter		Description	Type	Status
Number of columns	`column`	The number of cards which should fit on a single row (max 6) Default 1 Example 4	Number	suggested
Card title	`title`	The title text on the card Example Red 1 Jared	String	required
Card text	`text`	The content text on the card	Content	required
Card bottom	`bottom`	The text on the bottom section of the card	Content	optional
Card button link	`page`	The page linked by the button on the card Example Ships	Page name	optional
pagelink	`pagelink`	no description	Unknown	optional
Card button text	`pagetext`	The text displayed on the button on the card Example Don't click	String	optional
Card top byline	`bylinetop`	The byline text above the title on the card	String	optional
Card bottom byline	`bylinebottom`	The byline text below the title on the card	String	optional
Card background color	`colorbg`	The background color of the card Example #ffffff	Unknown	optional
Card text color	`colortext`	The text color of the card Example #000000	Unknown	optional
Card byline color	`colorbyline`	The color of the byline on the card Example #72777d	Unknown	optional
Card title color	`colortitle`	The color of the title on the card Example #222222	Unknown	optional
Card bottom background color	`colorbgbottom`	The background color of the bottom section of the card Example #eaecf0	Unknown	optional
Card bottom text color	`colorbottom`	The text color in the bottom section of the card Example #72777d	Unknown	optional
Card button background color	`colorbgbutton`	The background color of the button on the card Example #eaecf0	Unknown	optional

@@ Line 1: / Line 1: @@
-<includeonly><div class="card-container {{#ifeq:{{yesno|{{{wide|}}}}}|yes|floatnone}}">
+<includeonly><div class="card {{#if:{{{column|}}}|card-col{{{column}}}}}" style="{{#if:{{{colorbg|}}}|background:{{{colorbg}}};}}{{#if:{{{colortext|}}}|color:{{{colortext}}}}}"><!--
-    <div class="card-row">
+--><div class="card-top"><!--
-    	{{#for: {{{count|{{{column|1}}}}}}
+    -->{{#if:{{{bylinetop|}}}|<div class="byline-top" style="{{#if:{{{colorbyline|}}}|color:{{{colorbyline}}}}}">{{{bylinetop}}}</div>}}<!--
-    	 | <div class="card {{#if:{{{column|}}}|card-col{{{column}}}}}" style="{{#if:{{{colorbg$number$|}}}|background:{{{colorbg$number$}}};}}{{#if:{{{colortext$number$|}}}|color:{{{colortext$number$}}}}}"><!--
+	-->{{#if:{{{title|}}}|<div class="card-title" style="{{#if:{{{colortitle|}}}|color:{{{colortitle}}}}}">{{{title}}}</div>}}<!--
-	            --><div class="card-top"><!--
+	-->{{#if:{{{bylinebottom|}}}|<div class="byline-bottom" style="{{#if:{{{colorbyline|}}}|color:{{{colorbyline}}}}}">{{{bylinebottom}}}</div>}}<!--
-	            	-->{{#if:{{{bylinetop$number$|}}}|<div class="byline-top" style="{{#if:{{{colorbyline$number$|}}}|color:{{{colorbyline$number$}}}}}">{{{bylinetop$number$}}}}}</div>}}<!--
+	-->{{#if:{{{text|}}}|{{{text}}}}}<!--
-	            	-->{{#if:{{{title$number$|}}}|<div class="card-title" style="{{#if:{{{colortitle$number$|}}}|color:{{{colortitle$number$}}}}}">{{{title$number$}}}</div>}}<!--
+--></div><!--
-	            	-->{{#if:{{{bylinebottom$number$|}}}|<div class="byline-bottom" style="{{#if:{{{colorbyline$number$|}}}|color:{{{colorbyline$number$}}}}}">{{{bylinebottom$number$}}}</div>}}<!--
+-->{{#if:{{{bottom|}}}|<div class="card-bottom" style="{{#if:{{{colorbgbottom|}}}|background:{{{colorbgbottom}}};}}{{#if:{{{colorbottom|}}}|color:{{{colorbottom}}}}}">{{{bottom}}}</div>}}<!--
-	            	-->{{#if:{{{text$number$|}}}|{{{text$number$}}}}}<!--
+-->{{#if:{{{page|}}}{{{pagelink|}}}|<div class="card-button" style="{{#if:{{{colorbgbutton|}}}|background:{{{colorbgbutton}}}}}">{{#if:{{{pagelink|}}}|[{{{pagelink}}} {{{pagetext|{{{pagelink}}}}}}]|[[Special:MyLanguage/{{{page}}}|{{{pagetext|page}}}]]}}</div>}}</div><templatestyles src="Template:Card/styles.css" /></includeonly><noinclude>{{/doc}}<templatedata>
-	            --></div><!--
+{
-	            -->{{#if:{{{bottom$number$|}}}|<div class="card-bottom" style="{{#if:{{{colorbgbottom$number$|}}}|background:{{{colorbgbottom$number$}}};}}{{#if:{{{colorbottom$number$|}}}|color:{{{colorbottom$number$}}}}}">{{{bottom$number$}}}</div>}}<!--
+	"params": {
-	            -->{{#if:{{{page$number$|}}}{{{pagelink$number$|}}}|<div class="card-button" style="{{#if:{{{colorbgbutton$number$|}}}|background:{{{colorbgbutton$number$}}}}}">{{#if:{{{pagelink$number$|}}}|[{{{pagelink$number$}}} {{{pagetext$number$|{{{pagelink$number$}}}}}}]|[[Special:MyLanguage/{{{page$number$}}}|{{{pagetext$number$|page$number$}}}]]}}</div>}}<!--
+		"column": {
-	        --></div> | $number$ }}
+			"label": "Number of columns",
-    </div>
+			"description": "The number of cards which should fit on a single row (max 6)",
-</div><templatestyles src="Template:Card/styles.css" /></includeonly><noinclude>{{/doc}}</noinclude>
+			"example": "4",
+			"type": "number",
+			"default": "1",
+			"suggested": true
+		},
+		"title": {
+			"label": "Card title",
+			"description": "The title text on the card",
+			"example": "Red 1 Jared",
+			"type": "string",
+			"required": true,
+			"suggested": true
+		},
+		"text": {
+			"label": "Card text",
+			"description": "The content text on the card",
+			"type": "content",
+			"required": true,
+			"suggested": true
+		},
+		"bottom": {
+			"label": "Card bottom",
+			"description": "The text on the bottom section of the card",
+			"type": "content"
+		},
+		"page": {
+			"label": "Card button link",
+			"description": "The page linked by the button on the card",
+			"example": "Ships",
+			"type": "wiki-page-name"
+		},
+		"pagetext": {
+			"label": "Card button text",
+			"description": "The text displayed on the button on the card",
+			"example": "Don't click",
+			"type": "string"
+		},
+		"bylinetop": {
+			"label": "Card top byline",
+			"description": "The byline text above the title on the card",
+			"type": "string"
+		},
+		"bylinebottom": {
+			"label": "Card bottom byline",
+			"description": "The byline text below the title on the card",
+			"type": "string"
+		},
+		"colorbg": {
+			"label": "Card background color",
+			"description": "The background color of the card",
+			"example": "#ffffff"
+		},
+		"colortext": {
+			"label": "Card text color",
+			"description": "The text color of the card",
+			"example": "#000000"
+		},
+		"colorbyline": {
+			"label": "Card byline color",
+			"description": "The color of the byline on the card",
+			"example": "#72777d"
+		},
+		"colortitle": {
+			"label": "Card title color",
+			"description": "The color of the title on the card",
+			"example": "#222222"
+		},
+		"colorbgbottom": {
+			"label": "Card bottom background color",
+			"description": "The background color of the bottom section of the card",
+			"example": "#eaecf0"
+		},
+		"colorbottom": {
+			"label": "Card bottom text color",
+			"description": "The text color in the bottom section of the card",
+			"example": "#72777d"
+		},
+		"colorbgbutton": {
+			"label": "Card button background color",
+			"description": "The background color of the button on the card",
+			"example": "#eaecf0"
+		},
+		"pagelink": {}
+	},
+	"description": "This template is a template for generating a card, usually used in combination with the Cards template to create a grid or row layout on a page.\nCurrently only a maximum of six cards are supported in Visual Editing, please refer to the template page for advanced syntax.",
+	"paramOrder": [
+		"column",
+		"title",
+		"text",
+		"bottom",
+		"page",
+		"pagelink",
+		"pagetext",
+		"bylinetop",
+		"bylinebottom",
+        "colorbg",
+        "colortext",
+		"colorbyline",
+		"colortitle",
+		"colorbgbottom",
+		"colorbottom",
+		"colorbgbutton"
+	],
+	"format": "block"
+}
+</templatedata></noinclude>