Template:ShroomCard

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