Template:Card: Difference between revisions

Latest revision as of 00:26, 23 May 2024

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 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[Edit template data]
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	optional
Card 2 text	`text2`	The content text on card 2	Content	optional
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	required
Card 3 text	`text3`	The content text on card 3	Content	required
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	required
Card 4 text	`text4`	The content text on card 4	Content	required
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	required
Card 5 text	`text5`	The content text on card 5	Content	required
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	required
Card 6 text	`text6`	The content text on card 6	Content	required
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

Revision as of 21:03, 19 February 2024 (edit) Mausterio (talk \| contribs) (Created page with "<includeonly><div class="card-container {{#ifeq:{{yesno\|{{{wide\|}}}}}\|yes\|floatnone}}"> <div class="card-row"> {{#loop: cardcount \| 1 \| {{{count\|{{{column\|1}}}}}} \| <div class="card {{#if:{{{column\|}}}\|card-col{{{column}}}}}" style="{{#if:{{{colorbg{{#var:cardcount}}\|}}}\|background:{{{colorbg{{#var:cardcount}}}}};}}{{#if:{{{colortext{{#var:cardcount}}\|}}}\|color:{{{colortext{{#var:cardcount}}}}}}}"> <div class="card-top"><!--...") ← Older edit		Latest revision as of 00:26, 23 May 2024 (edit) (undo) Mausterio (talk \| contribs) m (1 revision imported)
(No difference)