To utilize, Insert a card swap organism partial called "CardSwapOrganism" via an Html Helper Extentsion method. Using both "FrontCard" & "BackCard" Card Molecules, Html and html helpers can be inserted into the method arguments. You must wrap this html with "@<text></text>". It's recommended you wrap the tags so easier to read and edit. The individual card molecules are structured by "CardViewModel" objects so strongly-typed information can be displayed.
@Html.CardSwapOrganism("testCardSwap",
new CardViewModel()
{
Id="testFrontCard",
HeaderContent = @<text>
<div class="toolbar toolbar--xxs toolbar--middle">
<div class="toolbar--column">
<h4>Front Card</h4>
</div>
<div class="toolbar--column toolbar--right">
@Html.ButtonAtom(ButtonTypeEnum.Base, "SaveButton", customClass: "button--white open-swap", ariaControls: "testBackCard", text: "Open Back")
</div>
</div>
</text>,
BodyContent = @<text><p>Front Card Text</p></text>,
FooterContent = @<text><i>Front Card Footer</i></text>
},
new CardViewModel()
{
Id = "testBackCard",
HeaderContent = @<text>
<div class="toolbar toolbar--xxs toolbar--middle">
<div class="toolbar--column">
<h4>Back Card</h4>
</div>
<div class="toolbar--column toolbar--right">
@Html.ButtonAtom(ButtonTypeEnum.Base, "SaveButton", customClass: "button--white close-swap", ariaControls: "testBackCard", text: "Close Back")
</div>
</div>
</text>,
BodyContent = @<text><p>Back Card Text</p></text>,
FooterContent = @<text><i>Back Card Footer</i></text>
})
