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

Cart step (Complete)

Step ButtonStep Button

$0.00 Frequency

Cart step (Active)

Step Button

$0.00 Frequency

Cart step (Next)

Description

Cart 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-->