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 step (Complete)

Step Button Step 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-->