Template:Card/doc: Difference between revisions

Template page
No edit summary
Tag: 2017 source edit
No edit summary
Tag: 2017 source edit
Line 5: Line 5:
== Parameters ==
== Parameters ==


=== Formatting parameters ===
=== Content parameters ===
;count
:The number of cards generated
;column
;column
:The number of cards on a single row (max 6)
:The number of cards which should fit on a single row (max 6)
;wide
;title
:Allows the grid to extend beyond page width in widescreen (yes or no)
:The title text on the card
 
;text
=== Content parameters ===
:The content text on the card
;title(n)
;bottom
:The title text on card (n)
:The text on the bottom section of the card. Usually used for actionable items like links.
;text(n)
;page
:The content text on card (n)
:The page linked by the button on the card. Only use it when there is only one action.
;bottom(n)
;pagetext
:The text on the bottom section of card (n). Usually used for actionable items like links.
:The text displayed on the button on the card
;page(n)
;bylinetop
:The page linked by the button on card (n). Only use it when there is only one action.
:The byline text above the title on the card
;pagetext(n)
;bylinebottom
:The text displayed on the button on card (n)
:The byline text below the title on the card
;bylinetop(n)
:The byline text above the title on card (n)
;bylinebottom(n)
:The byline text below the title on card (n)


=== Styling parameters ===
=== Styling parameters ===
;colorbg(n)
;colorbg
:The background color of card (n)
:The background color of the card
;colortext(n)
;colortext
:The text color of card (n)
:The text color of the card
;colorbyline(n)
;colorbyline
:The color of the byline on card (n)
:The color of the byline on the card
;colortitle(n)
;colortitle
:The color of the title on card (n)
:The color of the title on the card
;colorbgbottom(n)
;colorbgbottom
:The background color of the bottom section of card (n)
:The background color of the bottom section of the card
;colorbottom(n)
;colorbottom
:The text color in the bottom section of card (n)
:The text color in the bottom section of the card
;colorbgbutton(n)
;colorbgbutton
: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.
: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.


== TemplateData ==
== TemplateData ==
Line 49: Line 43:
{
{
"params": {
"params": {
"wide": {
"label": "Wide mode",
"description": "Allows the grid to extend beyond page width in widescreen",
"example": "Yes",
"type": "string",
"default": "No"
},
"count": {
"label": "Number of cards",
"description": "The number of cards generated",
"example": "1",
"type": "number",
"suggested": true,
"default": "The number of column"
},
"column": {
"column": {
"label": "Number of columns",
"label": "Number of columns",
"description": "The number of cards on a single row (max 6)",
"description": "The number of cards which should fit on a single row (max 6)",
"example": "4",
"example": "4",
"type": "number",
"type": "number",
Line 72: Line 51:
"suggested": true
"suggested": true
},
},
"title1": {
"title": {
"label": "Card 1 title",
"label": "Card title",
"description": "The title text on card 1",
"description": "The title text on the card",
"example": "Red 1 Jared",
"example": "Red 1 Jared",
"type": "string",
"type": "string",
Line 80: Line 59:
"suggested": true
"suggested": true
},
},
"text1": {
"text": {
"label": "Card 1 text",
"label": "Card text",
"description": "The content text on card 1",
"description": "The content text on the card",
"type": "content",
"required": true,
"suggested": true
},
"bottom1": {
"label": "Card 1 bottom",
"description": "The text on the bottom section of card 1",
"type": "content"
},
"page1": {
"label": "Card 1 button link",
"description": "The page linked by the button on card 1",
"example": "Ships",
"type": "wiki-page-name"
},
"pagetext1": {
"label": "Card 1 button text",
"description": "The text displayed on the button on card 1",
"example": "Don't click",
"type": "string"
},
"bylinetop1": {
"label": "Card 1 top byline",
"description": "The byline text above the title on card 1",
"type": "string"
},
"bylinebottom1": {
"label": "Card 1 bottom byline",
"description": "The byline text below the title on card 1",
"type": "string"
},
"colorbg1": {
"label": "Card 1 background color",
"description": "The background color of card 1",
"example": "#ffffff"
},
"colortext1": {
"label": "Card 1 text color",
"description": "The text color of card 1",
"example": "#000000"
},
"colorbyline1": {
"label": "Card 1 byline color",
"description": "The color of the byline on card 1",
"example": "#72777d"
},
"colortitle1": {
"label": "Card 1 title color",
"description": "The color of the title on card 1",
"example": "#222222"
},
"colorbgbottom1": {
"label": "Card 1 bottom background color",
"description": "The background color of the bottom section of card 1",
"example": "#eaecf0"
},
"colorbottom1": {
"label": "Card 1 bottom text color",
"description": "The text color in the bottom section of card 1",
"example": "#72777d"
},
"colorbgbutton1": {
"label": "Card 1 button background color",
"description": "The background color of the button on card 1",
"example": "#eaecf0"
},
"title2": {
"label": "Card 2 title",
"description": "The title text on card 2",
"example": "Red 2 Jared",
"type": "string"
},
"text2": {
"label": "Card 2 text",
"description": "The content text on card 2",
"type": "content"
},
"bottom2": {
"label": "Card 2 bottom",
"description": "The text on the bottom section of card 2",
"type": "content"
},
"page2": {
"label": "Card 2 button link",
"description": "The page linked by the button on card 2",
"example": "Ships",
"type": "wiki-page-name"
},
"pagetext2": {
"label": "Card 2 button text",
"description": "The text displayed on the button on card 2",
"example": "Don't click",
"type": "string"
},
"bylinetop2": {
"label": "Card 2 top byline",
"description": "The byline text above the title on card 2",
"type": "string"
},
"bylinebottom2": {
"label": "Card 2 bottom byline",
"description": "The byline text below the title on card 2",
"type": "string"
},
"colorbg2": {
"label": "Card 2 background color",
"description": "The background color of card 2",
"example": "#ffffff"
},
"colortext2": {
"label": "Card 2 text color",
"description": "The text color of card 2",
"example": "#000000"
},
"colorbyline2": {
"label": "Card 2 byline color",
"description": "The color of the byline on card 2",
"example": "#72777d"
},
"colortitle2": {
"label": "Card 2 title color",
"description": "The color of the title on card 2",
"example": "#222222"
},
"colorbgbottom2": {
"label": "Card 2 bottom background color",
"description": "The background color of the bottom section of card 2",
"example": "#eaecf0"
},
"colorbottom2": {
"label": "Card 2 bottom text color",
"description": "The text color in the bottom section of card 2",
"example": "#72777d"
},
"colorbgbutton2": {
"label": "Card 2 button background color",
"description": "The background color of the button on card 2",
"example": "#eaecf0"
},
"title3": {
"label": "Card 3 title",
"description": "The title text on card 3",
"example": "Red 3 Jared",
"type": "string",
"required": true,
"suggested": true
},
"text3": {
"label": "Card 3 text",
"description": "The content text on card 3",
"type": "content",
"required": true,
"suggested": true
},
"bottom3": {
"label": "Card 3 bottom",
"description": "The text on the bottom section of card 3",
"type": "content"
},
"page3": {
"label": "Card 3 button link",
"description": "The page linked by the button on card 3",
"example": "Ships",
"type": "wiki-page-name"
},
"pagetext3": {
"label": "Card 3 button text",
"description": "The text displayed on the button on card 3",
"example": "Don't click",
"type": "string"
},
"bylinetop3": {
"label": "Card 3 top byline",
"description": "The byline text above the title on card 3",
"type": "string"
},
"bylinebottom3": {
"label": "Card 3 bottom byline",
"description": "The byline text below the title on card 3",
"type": "string"
},
"colorbg3": {
"label": "Card 3 background color",
"description": "The background color of card 3",
"example": "#ffffff"
},
"colortext3": {
"label": "Card 3 text color",
"description": "The text color of card 3",
"example": "#000000"
},
"colorbyline3": {
"label": "Card 3 byline color",
"description": "The color of the byline on card 3",
"example": "#72777d"
},
"colortitle3": {
"label": "Card 3 title color",
"description": "The color of the title on card 3",
"example": "#222222"
},
"colorbgbottom3": {
"label": "Card 3 bottom background color",
"description": "The background color of the bottom section of card 3",
"example": "#eaecf0"
},
"colorbottom3": {
"label": "Card 3 bottom text color",
"description": "The text color in the bottom section of card 3",
"example": "#72777d"
},
"colorbgbutton3": {
"label": "Card 3 button background color",
"description": "The background color of the button on card 3",
"example": "#eaecf0"
},
"title4": {
"label": "Card 4 title",
"description": "The title text on card 4",
"example": "Red 4 Jared",
"type": "string",
"required": true,
"suggested": true
},
"text4": {
"label": "Card 4 text",
"description": "The content text on card 4",
"type": "content",
"required": true,
"suggested": true
},
"bottom4": {
"label": "Card 4 bottom",
"description": "The text on the bottom section of card 4",
"type": "content"
},
"page4": {
"label": "Card 4 button link",
"description": "The page linked by the button on card 4",
"example": "Ships",
"type": "wiki-page-name"
},
"pagetext4": {
"label": "Card 4 button text",
"description": "The text displayed on the button on card 4",
"example": "Don't click",
"type": "string"
},
"bylinetop4": {
"label": "Card 4 top byline",
"description": "The byline text above the title on card 4",
"type": "string"
},
"bylinebottom4": {
"label": "Card 4 bottom byline",
"description": "The byline text below the title on card 4",
"type": "string"
},
"colorbg4": {
"label": "Card 4 background color",
"description": "The background color of card 4",
"example": "#ffffff"
},
"colortext4": {
"label": "Card 4 text color",
"description": "The text color of card 4",
"example": "#000000"
},
"colorbyline4": {
"label": "Card 4 byline color",
"description": "The color of the byline on card 4",
"example": "#72777d"
},
"colortitle4": {
"label": "Card 4 title color",
"description": "The color of the title on card 4",
"example": "#222222"
},
"colorbgbottom4": {
"label": "Card 4 bottom background color",
"description": "The background color of the bottom section of card 4",
"example": "#eaecf0"
},
"colorbottom4": {
"label": "Card 4 bottom text color",
"description": "The text color in the bottom section of card 4",
"example": "#72777d"
},
"colorbgbutton4": {
"label": "Card 4 button background color",
"description": "The background color of the button on card 4",
"example": "#eaecf0"
},
"title5": {
"label": "Card 5 title",
"description": "The title text on card 5",
"example": "Red 5 Jared",
"type": "string",
"required": true,
"suggested": true
},
"text5": {
"label": "Card 5 text",
"description": "The content text on card 5",
"type": "content",
"type": "content",
"required": true,
"required": true,
"suggested": true
"suggested": true
},
},
"bottom5": {
"bottom": {
"label": "Card 5 bottom",
"label": "Card bottom",
"description": "The text on the bottom section of card 5",
"description": "The text on the bottom section of the card",
"type": "content"
"type": "content"
},
},
"page5": {
"page": {
"label": "Card 5 button link",
"label": "Card button link",
"description": "The page linked by the button on card 5",
"description": "The page linked by the button on the card",
"example": "Ships",
"example": "Ships",
"type": "wiki-page-name"
"type": "wiki-page-name"
},
},
"pagetext5": {
"pagetext": {
"label": "Card 5 button text",
"label": "Card button text",
"description": "The text displayed on the button on card 5",
"description": "The text displayed on the button on the card",
"example": "Don't click",
"example": "Don't click",
"type": "string"
"type": "string"
},
},
"bylinetop5": {
"bylinetop": {
"label": "Card 5 top byline",
"label": "Card top byline",
"description": "The byline text above the title on card 5",
"description": "The byline text above the title on the card",
"type": "string"
"type": "string"
},
},
"bylinebottom5": {
"bylinebottom": {
"label": "Card 5 bottom byline",
"label": "Card bottom byline",
"description": "The byline text below the title on card 5",
"description": "The byline text below the title on the card",
"type": "string"
"type": "string"
},
},
"colorbg5": {
"colorbg": {
"label": "Card 5 background color",
"label": "Card background color",
"description": "The background color of card 5",
"description": "The background color of the card",
"example": "#ffffff"
"example": "#ffffff"
},
},
"colortext5": {
"colortext": {
"label": "Card 5 text color",
"label": "Card text color",
"description": "The text color of card 5",
"description": "The text color of the card",
"example": "#000000"
"example": "#000000"
},
},
"colorbyline5": {
"colorbyline": {
"label": "Card 5 byline color",
"label": "Card byline color",
"description": "The color of the byline on card 5",
"description": "The color of the byline on the card",
"example": "#72777d"
"example": "#72777d"
},
},
"colortitle5": {
"colortitle": {
"label": "Card 5 title color",
"label": "Card title color",
"description": "The color of the title on card 5",
"description": "The color of the title on the card",
"example": "#222222"
"example": "#222222"
},
},
"colorbgbottom5": {
"colorbgbottom": {
"label": "Card 5 bottom background color",
"label": "Card bottom background color",
"description": "The background color of the bottom section of card 5",
"description": "The background color of the bottom section of the card",
"example": "#eaecf0"
"example": "#eaecf0"
},
},
"colorbottom5": {
"colorbottom": {
"label": "Card 5 bottom text color",
"label": "Card bottom text color",
"description": "The text color in the bottom section of card 5",
"description": "The text color in the bottom section of the card",
"example": "#72777d"
"example": "#72777d"
},
},
"colorbgbutton5": {
"colorbgbutton": {
"label": "Card 5 button background color",
"label": "Card button background color",
"description": "The background color of the button on card 5",
"description": "The background color of the button on the card",
"example": "#eaecf0"
"example": "#eaecf0"
},
},
"title6": {
"pagelink": {}
"label": "Card 6 title",
"description": "The title text on card 6",
"example": "Red 6 Jared",
"type": "string",
"required": true,
"suggested": true
},
"text6": {
"label": "Card 6 text",
"description": "The content text on card 6",
"type": "content",
"required": true,
"suggested": true
},
"bottom6": {
"label": "Card 6 bottom",
"description": "The text on the bottom section of card 6",
"type": "content"
},
"page6": {
"label": "Card 6 button link",
"description": "The page linked by the button on card 6",
"example": "Ships",
"type": "wiki-page-name"
},
"pagetext6": {
"label": "Card 6 button text",
"description": "The text displayed on the button on card 6",
"example": "Don't click",
"type": "string"
},
"bylinetop6": {
"label": "Card 6 top byline",
"description": "The byline text above the title on card 6",
"type": "string"
},
"bylinebottom6": {
"label": "Card 6 bottom byline",
"description": "The byline text below the title on card 6",
"type": "string"
},
"colorbg6": {
"label": "Card 6 background color",
"description": "The background color of card 6",
"example": "#ffffff"
},
"colortext6": {
"label": "Card 6 text color",
"description": "The text color of card 6",
"example": "#000000"
},
"colorbyline6": {
"label": "Card 6 byline color",
"description": "The color of the byline on card 6",
"example": "#72777d"
},
"colortitle6": {
"label": "Card 6 title color",
"description": "The color of the title on card 6",
"example": "#222222"
},
"colorbgbottom6": {
"label": "Card 6 bottom background color",
"description": "The background color of the bottom section of card 6",
"example": "#eaecf0"
},
"colorbottom6": {
"label": "Card 6 bottom text color",
"description": "The text color in the bottom section of card 6",
"example": "#72777d"
},
"colorbgbutton6": {
"label": "Card 6 button background color",
"description": "The background color of the button on card 6",
"example": "#eaecf0"
}
},
},
"description": "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.",
"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": [
"paramOrder": [
"count",
"column",
"column",
"wide",
"title",
"title1",
"text",
"text1",
"bottom",
"bottom1",
"page",
"page1",
"pagelink",
"pagetext1",
"pagetext",
"bylinetop1",
"bylinetop",
"bylinebottom1",
"bylinebottom",
"title2",
        "colorbg",
"text2",
        "colortext",
"bottom2",
"colorbyline",
"page2",
"colortitle",
"pagetext2",
"colorbgbottom",
"bylinetop2",
"colorbottom",
"bylinebottom2",
"colorbgbutton"
"title3",
"text3",
"bottom3",
"page3",
"pagetext3",
"bylinetop3",
"bylinebottom3",
"title4",
"text4",
"bottom4",
"page4",
"pagetext4",
"bylinetop4",
"bylinebottom4",
"title5",
"text5",
"bottom5",
"page5",
"pagetext5",
"bylinetop5",
"bylinebottom5",
"title6",
"text6",
"bottom6",
"page6",
"pagetext6",
"bylinetop6",
"bylinebottom6",
"colorbg1",
"colortitle1",
"colortext1",
"colorbgbottom1",
"colorbottom1",
"colorbgbutton1",
"colorbyline1",
"colorbg2",
"colortitle2",
"colortext2",
"colorbgbottom2",
"colorbottom2",
"colorbgbutton2",
"colorbyline2",
"colorbg3",
"colortitle3",
"colortext3",
"colorbgbottom3",
"colorbottom3",
"colorbgbutton3",
"colorbyline3",
"colorbg4",
"colortitle4",
"colortext4",
"colorbgbottom4",
"colorbottom4",
"colorbgbutton4",
"colorbyline4",
"colorbg5",
"colortitle5",
"colortext5",
"colorbgbottom5",
"colorbottom5",
"colorbgbutton5",
"colorbyline5",
"colorbg6",
"colortitle6",
"colortext6",
"colorbgbottom6",
"colorbottom6",
"colorbgbutton6",
"colorbyline6"
],
],
"format": "block"
"format": "block"

Revision as of 21:07, 6 May 2021

{{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.

TemplateData

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.

ParameterDescriptionTypeStatus
Number of columnscolumn

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

Default
1
Example
4
Numbersuggested
Card titletitle

The title text on the card

Example
Red 1 Jared
Stringrequired
Card texttext

The content text on the card

Contentrequired
Card bottombottom

The text on the bottom section of the card

Contentoptional
Card button linkpage

The page linked by the button on the card

Example
Ships
Page nameoptional
pagelinkpagelink

no description

Unknownoptional
Card button textpagetext

The text displayed on the button on the card

Example
Don't click
Stringoptional
Card top bylinebylinetop

The byline text above the title on the card

Stringoptional
Card bottom bylinebylinebottom

The byline text below the title on the card

Stringoptional
Card background colorcolorbg

The background color of the card

Example
#ffffff
Unknownoptional
Card text colorcolortext

The text color of the card

Example
#000000
Unknownoptional
Card byline colorcolorbyline

The color of the byline on the card

Example
#72777d
Unknownoptional
Card title colorcolortitle

The color of the title on the card

Example
#222222
Unknownoptional
Card bottom background colorcolorbgbottom

The background color of the bottom section of the card

Example
#eaecf0
Unknownoptional
Card bottom text colorcolorbottom

The text color in the bottom section of the card

Example
#72777d
Unknownoptional
Card button background colorcolorbgbutton

The background color of the button on the card

Example
#eaecf0
Unknownoptional

See also