Template:Stackcard - Revision history

Jayprakash: Created page with "

2020-02-08T07:51:17Z

Created page with "<div style="padding:1.125em; padding-bottom:0; margin:0.5625em; display:inline-block; border:1px solid #a2a9b1; max-width:{{{max-width|20em}}}; vertical-align:top; border-radi..."

New page
<div style="padding:1.125em; padding-bottom:0; margin:0.5625em; display:inline-block; border:1px solid #a2a9b1; max-width:{{{max-width|20em}}}; vertical-align:top; border-radius:2px; position:relative; box-shadow:0px 2px 2px rgba(0,0,0,0.1); {{{styles|}}}" {{{attributes|}}}>{{#if:{{{icon|}}}|
<div style="display:table-cell; padding-{{dir|{{CURRENTCONTENTLANGUAGE}}|left|right}}:1.125em;">
[[File:{{{icon}}}|{{{iconsize|75px}}}]]
</div>
}}<div style="{{#if:{{{icon|}}}|display:table-cell; vertical-align:top;|}}">
<span style="font-size:1.35em; font-weight:bold;">{{{header|}}}</span>
<div>
{{{contents|}}}
</div>
<div style="padding-top:0.5625em; min-height:35px">
{{{footer|}}}
<div class="{{{wrcIconType}}}" style="position:absolute; right:0; bottom:0;"></div>
</div>
</div>
</div><noinclude>
A '''stackable card''' is a basic design element. They're cards of content that line up next to each other, taking up the full width of the container they're in (such as the page body). If the screen becomes narrower, they stack on top of each other. They should never be wider than the container itself.

==Usage==
Each card is divided roughly into three sections: a '''header''', the main '''contents''', and the '''footer'''. As so:

<code><nowiki>{{Stackable card|header=Introduction|contents=Welcome to this lovely page.|footer=(Buttons might go here.)}}</nowiki></code>

{{Stackcard|header=Introduction|contents=Welcome to this lovely page.|footer=(Buttons might go here.)}}

For extra customization, you can add '''styles''' to the card as well as custom '''attributes''' (such as class attributes or data attributes).

<code><nowiki>{{Stackable card|header=Introduction|contents=Welcome to this lovely page.|footer=(Buttons might go here.)|styles=padding:4em;|attributes=data-test=Wow!}}</nowiki></code>

{{Stackcard|header=Introduction|contents=Welcome to this lovely page.|footer=(Buttons might go here.)|styles=padding:4em;|attributes=data-test=Wow!}}
</noinclude>