Template:Card/doc

This is a documentation subpage for Template:Card.It contains usage information, categories, and other content that is not part of the original template page.

Template:Card invokes Template:Card/styles.css using TemplateStyles.

{{Card}} is a template for generating cards in a grid or row layout on a page.

Parameters

Formatting parameters

count

The number of cards generated

column

The number of cards on a single row (max 6)

wide

Allows the grid to extend beyond page width in widescreen (yes or no)

Content parameters

title(n)

The title text on card (n)

text(n)

The content text on card (n)

bottom(n)

The text on the bottom section of card (n). Usually used for actionable items like links.

page(n)

The page linked by the button on card (n). Only use it when there is only one action.

pagetext(n)

The text displayed on the button on card (n)

bylinetop(n)

The byline text above the title on card (n)

bylinebottom(n)

The byline text below the title on card (n)

Styling parameters

colorbg(n)

The background color of card (n)

colortext(n)

The text color of card (n)

colorbyline(n)

The color of the byline on card (n)

colortitle(n)

The color of the title on card (n)

colorbgbottom(n)

The background color of the bottom section of card (n)

colorbottom(n)

The text color in the bottom section of card (n)

colorbgbutton(n)

The background color of the button on card (n), 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.

TemplateData

This template is a template for generating cards in 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 cards	count	The number of cards generated Default The number of column Example 1	Number	suggested
Number of columns	column	The number of cards on a single row (max 6) Default 1 Example 4	Number	suggested
Wide mode	wide	Allows the grid to extend beyond page width in widescreen Default No Example Yes	String	optional
Card 1 title	title1	The title text on card 1 Example Red 1 Jared	String	required
Card 1 text	text1	The content text on card 1	Content	required
Card 1 bottom	bottom1	The text on the bottom section of card 1	Content	optional
Card 1 button link	page1	The page linked by the button on card 1 Example Ships	Page name	optional
Card 1 button text	pagetext1	The text displayed on the button on card 1 Example Don't click	String	optional
Card 1 top byline	bylinetop1	The byline text above the title on card 1	String	optional
Card 1 bottom byline	bylinebottom1	The byline text below the title on card 1	String	optional
Card 2 title	title2	The title text on card 2 Example Red 2 Jared	String	suggested
Card 2 text	text2	The content text on card 2	Content	suggested
Card 2 bottom	bottom2	The text on the bottom section of card 2	Content	optional
Card 2 button link	page2	The page linked by the button on card 2 Example Ships	Page name	optional
Card 2 button text	pagetext2	The text displayed on the button on card 2 Example Don't click	String	optional
Card 2 top byline	bylinetop2	The byline text above the title on card 2	String	optional
Card 2 bottom byline	bylinebottom2	The byline text below the title on card 2	String	optional
Card 3 title	title3	The title text on card 3 Example Red 3 Jared	String	suggested
Card 3 text	text3	The content text on card 3	Content	suggested
Card 3 bottom	bottom3	The text on the bottom section of card 3	Content	optional
Card 3 button link	page3	The page linked by the button on card 3 Example Ships	Page name	optional
Card 3 button text	pagetext3	The text displayed on the button on card 3 Example Don't click	String	optional
Card 3 top byline	bylinetop3	The byline text above the title on card 3	String	optional
Card 3 bottom byline	bylinebottom3	The byline text below the title on card 3	String	optional
Card 4 title	title4	The title text on card 4 Example Red 4 Jared	String	suggested
Card 4 text	text4	The content text on card 4	Content	suggested
Card 4 bottom	bottom4	The text on the bottom section of card 4	Content	optional
Card 4 button link	page4	The page linked by the button on card 4 Example Ships	Page name	optional
Card 4 button text	pagetext4	The text displayed on the button on card 4 Example Don't click	String	optional
Card 4 top byline	bylinetop4	The byline text above the title on card 4	String	optional
Card 4 bottom byline	bylinebottom4	The byline text below the title on card 4	String	optional
Card 5 title	title5	The title text on card 5 Example Red 5 Jared	String	suggested
Card 5 text	text5	The content text on card 5	Content	suggested
Card 5 bottom	bottom5	The text on the bottom section of card 5	Content	optional
Card 5 button link	page5	The page linked by the button on card 5 Example Ships	Page name	optional
Card 5 button text	pagetext5	The text displayed on the button on card 5 Example Don't click	String	optional
Card 5 top byline	bylinetop5	The byline text above the title on card 5	String	optional
Card 5 bottom byline	bylinebottom5	The byline text below the title on card 5	String	optional
Card 6 title	title6	The title text on card 6 Example Red 6 Jared	String	suggested
Card 6 text	text6	The content text on card 6	Content	suggested
Card 6 bottom	bottom6	The text on the bottom section of card 6	Content	optional
Card 6 button link	page6	The page linked by the button on card 6 Example Ships	Page name	optional
Card 6 button text	pagetext6	The text displayed on the button on card 6 Example Don't click	String	optional
Card 6 top byline	bylinetop6	The byline text above the title on card 6	String	optional
Card 6 bottom byline	bylinebottom6	The byline text below the title on card 6	String	optional
Card 1 background color	colorbg1	The background color of card 1 Example #ffffff	Unknown	optional
Card 1 title color	colortitle1	The color of the title on card 1 Example #222222	Unknown	optional
Card 1 text color	colortext1	The text color of card 1 Example #000000	Unknown	optional
Card 1 bottom background color	colorbgbottom1	The background color of the bottom section of card 1 Example #eaecf0	Unknown	optional
Card 1 bottom text color	colorbottom1	The text color in the bottom section of card 1 Example #72777d	Unknown	optional
Card 1 button background color	colorbgbutton1	The background color of the button on card 1 Example #eaecf0	Unknown	optional
Card 1 byline color	colorbyline1	The color of the byline on card 1 Example #72777d	Unknown	optional
Card 2 background color	colorbg2	The background color of card 2 Example #ffffff	Unknown	optional
Card 2 title color	colortitle2	The color of the title on card 2 Example #222222	Unknown	optional
Card 2 text color	colortext2	The text color of card 2 Example #000000	Unknown	optional
Card 2 bottom background color	colorbgbottom2	The background color of the bottom section of card 2 Example #eaecf0	Unknown	optional
Card 2 bottom text color	colorbottom2	The text color in the bottom section of card 2 Example #72777d	Unknown	optional
Card 2 button background color	colorbgbutton2	The background color of the button on card 2 Example #eaecf0	Unknown	optional
Card 2 byline color	colorbyline2	The color of the byline on card 2 Example #72777d	Unknown	optional
Card 3 background color	colorbg3	The background color of card 3 Example #ffffff	Unknown	optional
Card 3 title color	colortitle3	The color of the title on card 3 Example #222222	Unknown	optional
Card 3 text color	colortext3	The text color of card 3 Example #000000	Unknown	optional
Card 3 bottom background color	colorbgbottom3	The background color of the bottom section of card 3 Example #eaecf0	Unknown	optional
Card 3 bottom text color	colorbottom3	The text color in the bottom section of card 3 Example #72777d	Unknown	optional
Card 3 button background color	colorbgbutton3	The background color of the button on card 3 Example #eaecf0	Unknown	optional
Card 3 byline color	colorbyline3	The color of the byline on card 3 Example #72777d	Unknown	optional
Card 4 background color	colorbg4	The background color of card 4 Example #ffffff	Unknown	optional
Card 4 title color	colortitle4	The color of the title on card 4 Example #222222	Unknown	optional
Card 4 text color	colortext4	The text color of card 4 Example #000000	Unknown	optional
Card 4 bottom background color	colorbgbottom4	The background color of the bottom section of card 4 Example #eaecf0	Unknown	optional
Card 4 bottom text color	colorbottom4	The text color in the bottom section of card 4 Example #72777d	Unknown	optional
Card 4 button background color	colorbgbutton4	The background color of the button on card 4 Example #eaecf0	Unknown	optional
Card 4 byline color	colorbyline4	The color of the byline on card 4 Example #72777d	Unknown	optional
Card 5 background color	colorbg5	The background color of card 5 Example #ffffff	Unknown	optional
Card 5 title color	colortitle5	The color of the title on card 5 Example #222222	Unknown	optional
Card 5 text color	colortext5	The text color of card 5 Example #000000	Unknown	optional
Card 5 bottom background color	colorbgbottom5	The background color of the bottom section of card 5 Example #eaecf0	Unknown	optional
Card 5 bottom text color	colorbottom5	The text color in the bottom section of card 5 Example #72777d	Unknown	optional
Card 5 button background color	colorbgbutton5	The background color of the button on card 5 Example #eaecf0	Unknown	optional
Card 5 byline color	colorbyline5	The color of the byline on card 5 Example #72777d	Unknown	optional
Card 6 background color	colorbg6	The background color of card 6 Example #ffffff	Unknown	optional
Card 6 title color	colortitle6	The color of the title on card 6 Example #222222	Unknown	optional
Card 6 text color	colortext6	The text color of card 6 Example #000000	Unknown	optional
Card 6 bottom background color	colorbgbottom6	The background color of the bottom section of card 6 Example #eaecf0	Unknown	optional
Card 6 bottom text color	colorbottom6	The text color in the bottom section of card 6 Example #72777d	Unknown	optional
Card 6 button background color	colorbgbutton6	The background color of the button on card 6 Example #eaecf0	Unknown	optional
Card 6 byline color	colorbyline6	The color of the byline on card 6 Example #72777d	Unknown	optional