MOVU Components

Additional Product Card: Default 

<div class="movu-additional-product-card default moving-boxes-with-logo">
    <div class="movu-additional-product-card-top">
        <div class="col-xs-12 col-lg-7 no-padding-left no-padding-right">
            <div class="mapc-top-left">
                <div class="mapc-description-wrapper">

                    <span class="mapc-subtitle">Stress-free moving</span>

                    <h1 class="mapc-title">Buy moving boxes for CHF 3.– per piece<div class="movu-popup-wrapper"><a><i class="material-icons">info_outline</i></a></div>
                    </h1>

                </div>

                <div class="insurance-icon-wrapper">
                    <img src="/public/build/assets/images/icons/box.svg">
                </div>

            </div>
            <p class="mapc-shipping-description">Shipping free within 2 days</p>

        </div>
        <div class="col-xs-12 col-lg-5 no-padding-left no-padding-right">
            <div class="mapc-top-right">
                <div class="counter-spinner-desktop-wrapper hidden-xs">
                    <p class="amount-title">Amount</p>
                    <movu-counter-spinner steps="1"></movu-counter-spinner>
                    <p class="stock">In stock</p>
                </div>
                <div class="counter-spinner-mobile-wrapper visible-xs">
                    <p class="amount-title">Amount</p>
                    <movu-counter-spinner steps="1" small></movu-counter-spinner>
                    <p class="stock">In stock</p>
                </div>
            </div>
        </div>
    </div>
    <div class="movu-additional-product-card-bottom">
        <div class="movu-additional-product-card-bottom-flex">

            <div class="col-xs-12 col-sm-6 col-md-7 no-padding-left no-padding-right">

                <h1 class="mapc-title price">CHF 105.-</h1>

                <span class="price-text small"></span>
            </div>

            <div class="col-xs-12 col-sm-6 col-md-5 no-padding-left no-padding-right">

                <movu-button secondary text="Add to cart" custom_class="button-default-size"></movu-button>

            </div>

        </div>
    </div>
</div>
 
{% if companySectionTitle and companySectionSubtitle %}
<div class="movu-additional-product-card-company-section">
    <div class="col-xs-8 col-sm-6 no-padding-left no-padding-right">
        <span class="company-section-subtitle small">{{ companySectionTitle }}</span>
        <h3 class="company-section-title">{{ companySectionSubtitle }}</h3>
    </div>
    <div class="col-xs-4 col-sm-6 logo-column no-padding-left no-padding-right">
        <span class="small">Powered by</span><img src="/public/build/assets/images/baloise_desktop.svg">
    </div>
</div>
{% endif %}
<div class="movu-additional-product-card {{ mapcInsuranceClass }}">
    <div class="movu-additional-product-card-top">
        <div class="col-xs-12 col-lg-7 no-padding-left no-padding-right">
            <div class="mapc-top-left">
                <div class="mapc-description-wrapper">
                    {% if mapcSubtitle %}
                    <span class="mapc-subtitle">{{ mapcSubtitle }}</span>
                    {% endif %}
                    {% if mapcTitle %}
                    <h1 class="mapc-title">{{ mapcTitle }}<div class="movu-popup-wrapper"><a><i class="material-icons">info_outline</i></a></div></h1> 
                    {% endif %}
                </div>
                {% if insuranceIcon %}
                <div class="insurance-icon-wrapper">
                  {{ insuranceIcon }}
                </div>
                {% endif %}
            </div>
            {% if mapcShippingDescription %}<p class="mapc-shipping-description">{{ mapcShippingDescription }}</p> {% endif %}
            {% if added %} 
            <movu-button flat cta text="Hide details" custom_class="hidden-xs hidden-sm hidden-md"></movu-button>
            {% endif %}
        </div>
        <div class="col-xs-12 col-lg-5 no-padding-left no-padding-right">
            <div class="mapc-top-right">
                {{ mapcTopRightSlot }}
            </div>
        </div>
    </div>
    <div class="movu-additional-product-card-bottom">
        <div class="movu-additional-product-card-bottom-flex">
            {% if not added %}
            <div class="col-xs-12 col-sm-6 col-md-7 no-padding-left no-padding-right">
            {% else %}
            <div class="col-xs-12 col-lg-7 no-padding-left no-padding-right flex-col">
            {% endif %}
                <h1 class="mapc-title price">{{ mapcPrice }}</h1>
                
                {% if not added and priceAdditionalDescription %}<span class="price-text small">{{ priceAdditionalDescription }}</span>{% else %}<span class="price-text small">{{ priceAdditionalDescription2 }}</span>{% endif %}
            </div>
            {% if not added %}
            <div class="col-xs-12 col-sm-6 col-md-5 no-padding-left no-padding-right">
            {% else %}
             <div class="col-xs-12 col-lg-5 no-padding-left no-padding-right">
            {% endif %}
                {% if not added %}
                <movu-button secondary text="Add to cart" custom_class="button-default-size"></movu-button>
                {% else %}
                 <p class="added-to-cart-text">{{ addedToCartText }}</p>
                {% endif %}
            </div>
            {% if added %}
            <div class="col-xs-12 visible-xs visible-sm visible-md">
                <movu-button flat cta text="Hide details"></movu-button>
            </div>
            {% endif %}
        </div>
    </div>
</div>
 
{
  "mapcInsuranceClass": "default moving-boxes-with-logo",
  "mapcSubtitle": "Stress-free moving",
  "mapcTitle": "Buy moving boxes for CHF 3.– per piece",
  "mapcShippingDescription": "Shipping free within 2 days",
  "insuranceIcon": "<img src=\"/public/build/assets/images/icons/box.svg\">",
  "mapcTopRightSlot": " <div class=\"counter-spinner-desktop-wrapper hidden-xs\"> <p class=\"amount-title\">Amount</p> <movu-counter-spinner steps=\"1\"></movu-counter-spinner> <p class=\"stock\">In stock</p> </div> <div class=\"counter-spinner-mobile-wrapper visible-xs\"> <p class=\"amount-title\">Amount</p> <movu-counter-spinner steps=\"1\" small></movu-counter-spinner> <p class=\"stock\">In stock</p> </div>",
  "mapcPrice": "CHF 105.-",
  "added": false
}

No notes defined.