MOVU Components

Additional Product Card Closed: Default 

<div class="movu-additional-product-card closed">
    <div class="movu-additional-product-card-visible-mobile-tablet">
        <div class="col-xs-12 no-padding-left no-padding-right">
            <div class="mapc-description-wrapper">

                <h1 class="mapc-title">Moving boxes</h1>

                <div class="movu-popup-wrapper"><a><i class="material-icons">info_outline</i></a></div>
            </div>
        </div>
        <div class="col-xs-12 no-padding-left no-padding-right flex-reversed">
            <div class="col-xs-12 col-lg-6 no-padding-left no-padding-right">
                <p class="added-to-cart-text">Succesfully added to cart.</p>
            </div>
            <div class="col-xs-12 col-lg-6 no-padding-left no-padding-right">
                <movu-button flat cta text="Show details"></movu-button>
            </div>
        </div>
    </div>
    <div class="movu-additional-product-card-visible-desktop">
        <div class="col-md-7 no-padding-left no-padding-right">

            <h1 class="mapc-title">Moving boxes</h1>

            <movu-button flat cta text="Show details"></movu-button>
        </div>
        <div class="col-md-5 no-padding-left no-padding-right">
            <p class="added-to-cart-text">Succesfully added to cart.</p>
        </div>

    </div>
</div>
 
<div class="movu-additional-product-card {{ mapcInsuranceClass }}">
    <div class="movu-additional-product-card-visible-mobile-tablet">
        <div class="col-xs-12 no-padding-left no-padding-right">
            <div class="mapc-description-wrapper">
                {% if mapcTitle %}
                <h1 class="mapc-title">{{ mapcTitle }}</h1>
                {% endif %}
                <div class="movu-popup-wrapper"><a><i class="material-icons">info_outline</i></a></div>
            </div>
        </div>
        <div class="col-xs-12 no-padding-left no-padding-right flex-reversed">
            <div class="col-xs-12 col-lg-6 no-padding-left no-padding-right">
                <p class="added-to-cart-text">{{ addedToCartText }}</p>
            </div>
            <div class="col-xs-12 col-lg-6 no-padding-left no-padding-right">
                <movu-button flat cta text="Show details"></movu-button>
            </div>
        </div>
    </div>
    <div class="movu-additional-product-card-visible-desktop">
        <div class="col-md-7 no-padding-left no-padding-right">
                {% if mapcTitle %}
                <h1 class="mapc-title">{{ mapcTitle }}</h1>
                {% endif %}   
                <movu-button flat cta text="Show details"></movu-button>
        </div>
        <div class="col-md-5 no-padding-left no-padding-right">
            <p class="added-to-cart-text">{{ addedToCartText }}</p>
        </div>
        
    </div>
</div>
 
{
  "mapcInsuranceClass": "closed",
  "mapcTitle": "Moving boxes",
  "addedToCartText": "Succesfully added to cart."
}

No notes defined.