Template:ShroomCard: Difference between revisions
From the Super Mario Wiki, the Mario encyclopedia
Jump to navigationJump to search
mNo edit summary |
mNo edit summary |
||
| Line 1: | Line 1: | ||
<includeonly> | <includeonly><div class="shroomCard shroomCardFlip {{{align|left}}}"> | ||
<div class="shroomCard shroomCardFlip {{{align|left}}}"> | |||
<div class="shroomCardInner"> | <div class="shroomCardInner"> | ||
<div class="front {{{classFront|}}}" style="{{#if: {{{cardWidth|}}}|width: {{{cardWidth}}};|}} {{#if: {{{cardHeight|}}}|height: {{{cardHeight}}};|}} {{{styleFront|}}}"> | <div class="front {{{classFront|}}}" style="{{#if: {{{cardWidth|}}}|width: {{{cardWidth}}};|}} {{#if: {{{cardHeight|}}}|height: {{{cardHeight}}};|}} {{{styleFront|}}}"> | ||
| Line 9: | Line 8: | ||
</div> | </div> | ||
</div> | </div> | ||
</div> | </div></includeonly><noinclude> | ||
</includeonly><noinclude> | |||
=== How to Use === | === How to Use === | ||
<pre> | <pre> | ||
Latest revision as of 18:10, March 20, 2024
How to Use
Syntax:
{{ShroomCard|align=(left|center|right)|cardWidth=(width)|cardHeight=(height)|classFront=(css)|classBack=(css)|styleFront=(css)|styleBack=(css)|front|back}}
Parameters
- align (Optional) - Determines where to make the card positioned. Can be "left", "right", or "center". Defaults to center.
- cardWidth (Optional) - Determines how wide you want the card to be. Defaults to 100%.
- cardHeight (Optional) - Determines how tall you want the card to be. Defaults to fit-content.
- classFront (Optional) - You can add additional CSS classes with this property.
- classBack (Optional) - You can add additional CSS classes with this property.
- styleFront (Optional) - Determines any additional CSS properties for the front of the card.
- styleBack (Optional) - Determines any additional CSS properties for the back of the card.
- front - The content you want for the front of the card.
- back - The content you want for the back of the card.
Cards are entities that have a front, and a back. Initially, they only display the front face, but when clicked, they have a flip animation and display the back face. They can be toggled back and forth.
Such is the case as the following code:
{{ShroomCard
|align=center
|cardWidth=450px
|cardHeight=250px
|classFront=shroombg pp pp19
|styleBack=background:blue;color:white
|FRONT
|BACK
}}
Which renders as:
FRONT
BACK
