Template:Card: Difference between revisions

Template page
(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"><!--...")
m (1 revision imported)
 
(No difference)

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.
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[Edit template data]

This template prefers block formatting of parameters.

ParameterDescriptionTypeStatus
Number of cardscount

The number of cards generated

Default
The number of column
Example
1
Numbersuggested
Number of columnscolumn

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

Default
1
Example
4
Numbersuggested
Wide modewide

Allows the grid to extend beyond page width in widescreen

Default
No
Example
Yes
Stringoptional
Card 1 titletitle1

The title text on card 1

Example
Red 1 Jared
Stringrequired
Card 1 texttext1

The content text on card 1

Contentrequired
Card 1 bottombottom1

The text on the bottom section of card 1

Contentoptional
Card 1 button linkpage1

The page linked by the button on card 1

Example
Ships
Page nameoptional
Card 1 button textpagetext1

The text displayed on the button on card 1

Example
Don't click
Stringoptional
Card 1 top bylinebylinetop1

The byline text above the title on card 1

Stringoptional
Card 1 bottom bylinebylinebottom1

The byline text below the title on card 1

Stringoptional
Card 2 titletitle2

The title text on card 2

Example
Red 2 Jared
Stringoptional
Card 2 texttext2

The content text on card 2

Contentoptional
Card 2 bottombottom2

The text on the bottom section of card 2

Contentoptional
Card 2 button linkpage2

The page linked by the button on card 2

Example
Ships
Page nameoptional
Card 2 button textpagetext2

The text displayed on the button on card 2

Example
Don't click
Stringoptional
Card 2 top bylinebylinetop2

The byline text above the title on card 2

Stringoptional
Card 2 bottom bylinebylinebottom2

The byline text below the title on card 2

Stringoptional
Card 3 titletitle3

The title text on card 3

Example
Red 3 Jared
Stringrequired
Card 3 texttext3

The content text on card 3

Contentrequired
Card 3 bottombottom3

The text on the bottom section of card 3

Contentoptional
Card 3 button linkpage3

The page linked by the button on card 3

Example
Ships
Page nameoptional
Card 3 button textpagetext3

The text displayed on the button on card 3

Example
Don't click
Stringoptional
Card 3 top bylinebylinetop3

The byline text above the title on card 3

Stringoptional
Card 3 bottom bylinebylinebottom3

The byline text below the title on card 3

Stringoptional
Card 4 titletitle4

The title text on card 4

Example
Red 4 Jared
Stringrequired
Card 4 texttext4

The content text on card 4

Contentrequired
Card 4 bottombottom4

The text on the bottom section of card 4

Contentoptional
Card 4 button linkpage4

The page linked by the button on card 4

Example
Ships
Page nameoptional
Card 4 button textpagetext4

The text displayed on the button on card 4

Example
Don't click
Stringoptional
Card 4 top bylinebylinetop4

The byline text above the title on card 4

Stringoptional
Card 4 bottom bylinebylinebottom4

The byline text below the title on card 4

Stringoptional
Card 5 titletitle5

The title text on card 5

Example
Red 5 Jared
Stringrequired
Card 5 texttext5

The content text on card 5

Contentrequired
Card 5 bottombottom5

The text on the bottom section of card 5

Contentoptional
Card 5 button linkpage5

The page linked by the button on card 5

Example
Ships
Page nameoptional
Card 5 button textpagetext5

The text displayed on the button on card 5

Example
Don't click
Stringoptional
Card 5 top bylinebylinetop5

The byline text above the title on card 5

Stringoptional
Card 5 bottom bylinebylinebottom5

The byline text below the title on card 5

Stringoptional
Card 6 titletitle6

The title text on card 6

Example
Red 6 Jared
Stringrequired
Card 6 texttext6

The content text on card 6

Contentrequired
Card 6 bottombottom6

The text on the bottom section of card 6

Contentoptional
Card 6 button linkpage6

The page linked by the button on card 6

Example
Ships
Page nameoptional
Card 6 button textpagetext6

The text displayed on the button on card 6

Example
Don't click
Stringoptional
Card 6 top bylinebylinetop6

The byline text above the title on card 6

Stringoptional
Card 6 bottom bylinebylinebottom6

The byline text below the title on card 6

Stringoptional
Card 1 background colorcolorbg1

The background color of card 1

Example
#ffffff
Unknownoptional
Card 1 title colorcolortitle1

The color of the title on card 1

Example
#222222
Unknownoptional
Card 1 text colorcolortext1

The text color of card 1

Example
#000000
Unknownoptional
Card 1 bottom background colorcolorbgbottom1

The background color of the bottom section of card 1

Example
#eaecf0
Unknownoptional
Card 1 bottom text colorcolorbottom1

The text color in the bottom section of card 1

Example
#72777d
Unknownoptional
Card 1 button background colorcolorbgbutton1

The background color of the button on card 1

Example
#eaecf0
Unknownoptional
Card 1 byline colorcolorbyline1

The color of the byline on card 1

Example
#72777d
Unknownoptional
Card 2 background colorcolorbg2

The background color of card 2

Example
#ffffff
Unknownoptional
Card 2 title colorcolortitle2

The color of the title on card 2

Example
#222222
Unknownoptional
Card 2 text colorcolortext2

The text color of card 2

Example
#000000
Unknownoptional
Card 2 bottom background colorcolorbgbottom2

The background color of the bottom section of card 2

Example
#eaecf0
Unknownoptional
Card 2 bottom text colorcolorbottom2

The text color in the bottom section of card 2

Example
#72777d
Unknownoptional
Card 2 button background colorcolorbgbutton2

The background color of the button on card 2

Example
#eaecf0
Unknownoptional
Card 2 byline colorcolorbyline2

The color of the byline on card 2

Example
#72777d
Unknownoptional
Card 3 background colorcolorbg3

The background color of card 3

Example
#ffffff
Unknownoptional
Card 3 title colorcolortitle3

The color of the title on card 3

Example
#222222
Unknownoptional
Card 3 text colorcolortext3

The text color of card 3

Example
#000000
Unknownoptional
Card 3 bottom background colorcolorbgbottom3

The background color of the bottom section of card 3

Example
#eaecf0
Unknownoptional
Card 3 bottom text colorcolorbottom3

The text color in the bottom section of card 3

Example
#72777d
Unknownoptional
Card 3 button background colorcolorbgbutton3

The background color of the button on card 3

Example
#eaecf0
Unknownoptional
Card 3 byline colorcolorbyline3

The color of the byline on card 3

Example
#72777d
Unknownoptional
Card 4 background colorcolorbg4

The background color of card 4

Example
#ffffff
Unknownoptional
Card 4 title colorcolortitle4

The color of the title on card 4

Example
#222222
Unknownoptional
Card 4 text colorcolortext4

The text color of card 4

Example
#000000
Unknownoptional
Card 4 bottom background colorcolorbgbottom4

The background color of the bottom section of card 4

Example
#eaecf0
Unknownoptional
Card 4 bottom text colorcolorbottom4

The text color in the bottom section of card 4

Example
#72777d
Unknownoptional
Card 4 button background colorcolorbgbutton4

The background color of the button on card 4

Example
#eaecf0
Unknownoptional
Card 4 byline colorcolorbyline4

The color of the byline on card 4

Example
#72777d
Unknownoptional
Card 5 background colorcolorbg5

The background color of card 5

Example
#ffffff
Unknownoptional
Card 5 title colorcolortitle5

The color of the title on card 5

Example
#222222
Unknownoptional
Card 5 text colorcolortext5

The text color of card 5

Example
#000000
Unknownoptional
Card 5 bottom background colorcolorbgbottom5

The background color of the bottom section of card 5

Example
#eaecf0
Unknownoptional
Card 5 bottom text colorcolorbottom5

The text color in the bottom section of card 5

Example
#72777d
Unknownoptional
Card 5 button background colorcolorbgbutton5

The background color of the button on card 5

Example
#eaecf0
Unknownoptional
Card 5 byline colorcolorbyline5

The color of the byline on card 5

Example
#72777d
Unknownoptional
Card 6 background colorcolorbg6

The background color of card 6

Example
#ffffff
Unknownoptional
Card 6 title colorcolortitle6

The color of the title on card 6

Example
#222222
Unknownoptional
Card 6 text colorcolortext6

The text color of card 6

Example
#000000
Unknownoptional
Card 6 bottom background colorcolorbgbottom6

The background color of the bottom section of card 6

Example
#eaecf0
Unknownoptional
Card 6 bottom text colorcolorbottom6

The text color in the bottom section of card 6

Example
#72777d
Unknownoptional
Card 6 button background colorcolorbgbutton6

The background color of the button on card 6

Example
#eaecf0
Unknownoptional
Card 6 byline colorcolorbyline6

The color of the byline on card 6

Example
#72777d
Unknownoptional

See also

Retrieved from "https://www.woopmc.com/index.php?title=Template:Card&oldid=447"