Template:Card: Difference between revisions

Template page
No edit summary
Tag: 2017 source edit
No edit summary
Tag: 2017 source edit
Line 2: Line 2:
     <div class="card-row">
     <div class="card-row">
     {{#for: {{{count|{{{column|1}}}}}}
     {{#for: {{{count|{{{column|1}}}}}}
     | <div class="card {{#if:{{{column|}}}|card-col{{{column}}}}}" style="{{#if:{{{colorbg$number$|}}}|background:{{{colorbg$number$}}};}}{{#if:{{{colortext$number$|}}}|color:{{{colortext$number$}}}}}"><div class="card-top">{{#if:{{{bylinetop$number$|}}}|<div class="byline-top" style="{{#if:{{{colorbyline$number$|}}}|color:{{{colorbyline$number$}}}}}">{{{bylinetop$number$}}}}}</div>}}{{#if:{{{title$number$|}}}|<div class="card-title" style="{{#if:{{{colortitle$number$|}}}|color:{{{colortitle$number$}}}}}">{{{title$number$}}}</div>}}{{#if:{{{bylinebottom$number$|}}}|<div class="byline-bottom" style="{{#if:{{{colorbyline$number$|}}}|color:{{{colorbyline$number$}}}}}">{{{bylinebottom$number$}}}</div>}}{{#if:{{{text$number$|}}}|{{{text$number$}}}}}</div>{{#if:{{{bottom$number$|}}}|<div class="card-bottom" style="{{#if:{{{colorbgbottom$number$|}}}|background:{{{colorbgbottom$number$}}};}}{{#if:{{{colorbottom$number$|}}}|color:{{{colorbottom$number$}}}}}">{{{bottom$number$}}}</div>}}{{#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>}}</div> | $number$ }}
     | <div class="card {{#if:{{{column|}}}|card-col{{{column}}}}}" style="{{#if:{{{colorbg$number$|}}}|background:{{{colorbg$number$}}};}}{{#if:{{{colortext$number$|}}}|color:{{{colortext$number$}}}}}"><!--
            --><div class="card-top"><!--
            -->{{#if:{{{bylinetop$number$|}}}|<div class="byline-top" style="{{#if:{{{colorbyline$number$|}}}|color:{{{colorbyline$number$}}}}}">{{{bylinetop$number$}}}}}</div>}}<!--
            -->{{#if:{{{title$number$|}}}|<div class="card-title" style="{{#if:{{{colortitle$number$|}}}|color:{{{colortitle$number$}}}}}">{{{title$number$}}}</div>}}<!--
            -->{{#if:{{{bylinebottom$number$|}}}|<div class="byline-bottom" style="{{#if:{{{colorbyline$number$|}}}|color:{{{colorbyline$number$}}}}}">{{{bylinebottom$number$}}}</div>}}<!--
            -->{{#if:{{{text$number$|}}}|{{{text$number$}}}}}<!--
            --></div><!--
        --></div> | $number$ }}
     </div>
     </div>
</div><templatestyles src="Template:Card/styles.css" /></includeonly><noinclude>{{/doc}}</noinclude>
</div><templatestyles src="Template:Card/styles.css" /></includeonly><noinclude>{{/doc}}</noinclude>

Revision as of 19:13, 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