Shopping Cart Module
The cart module consists of a header Cart__header
footer Cart__footer
& steps Cart__step
with various states Cart__step--next
Cart__step--complete
Cart__step--incomplete
some of which can contain price and payment frequency as HTML.
CART HEADER
Cart Description
$0.00 Frequency
Cart step (Active)
Step Button$0.00 Frequency
Cart step (Next)
DescriptionCart step (Incomplete)
<div class="Cart__wrapper">
<div class="Cart__header">
<h3>CART HEADER</h3>
<p>Cart Description</p>
</div><!--Cart__header-->
<div class="Cart__step Cart__step--complete">
<div class="Cart__actions">
<p class="Cart__heading">Cart step (Complete)</p>
<a href="#">Step Button</a><a href="#">Step Button</a>
</div><!--Cart__actions--><p class="Cart__step-price">$0.00 <span>Frequency</span></p>
</div><!--Cart__step-->
<div class="Cart__step">
<div class="Cart__actions">
<p class="Cart__heading">Cart step (Active)</p>
<a href="#">Step Button</a>
</div><!--Cart__actions--><p class="Cart__step-price">$0.00 <span>Frequency</span></p>
</div><!--Cart__step-->
<div class="Cart__step Cart__step--next">
<p class="Cart__heading">Cart step (Next)</p>
<span>Description</span>
</div><!--Cart__step-->
<div class="Cart__step Cart__step--incomplete">
<p class="Cart__heading">Cart step (Incomplete)</p>
</div><!--Cart__step-->
<div class="Cart__footer">
<div class="Cart__total-price"><p>Total amount due</p><span>$0.00</span></div>
</div><!--Cart__footer-->
</div><!--Cart__wrapper-->