MOVU Components

Premium Reservation 

<div class="movu-card-holder movu-card-premium-reservation">
    <div class="movu-card-block">
        <div class="movu-card-block-inner">
            <div class="title-wrapper">

                <h3 class="movu-card-title">Your offer</h3>

                <span class="small">Valid until: 31.10.2018</span>

            </div>

            <section class="clearfix">

                <div class="row">
                    <div class="service main-service premium-reservation-hourly clearfix">
                        <div class="col-xs-12 col-sm-8">
                            <div class="premium-reservation-description">
                                <h3>Moving service:</h3>
                                <h4>including:</h4>
                                <ul class="unordered-list">
                                    <li>Eaque ipsa quae.</li>
                                    <li>Packing of boxes (incl. boxes)</li>
                                    <li>Eaque ipsa.</li>
                                </ul>

                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-4">
                            <div class="pull-right text-right prices-right">
                                <h3 class="price">CHF 560.- <span>/h</span></h3>
                                <h4 class="estimated-hours">estimated hours: 8</h4>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="service subservice fixed clearfix">
                        <div class="col-xs-12 col-sm-8">
                            <div class="subservice-name">
                                <h3>furniture lift</h3>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-4">
                            <div class="pull-right text-right prices-right">
                                <h3 class="price">CHF 100.-</h3>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="border-2-bottom"></div>
                <div class="row">
                    <div class="service main-service premium-reservation-hourly clearfix">
                        <div class="col-xs-12 col-sm-8">
                            <div class="premium-reservation-description">
                                <h3>Cleaning service</h3>
                                <h4>including:</h4>
                                <ul class="unordered-list">
                                    <li>Eaque ipsa quae.</li>
                                    <li>Packing of boxes (incl. boxes)</li>
                                    <li>Eaque ipsa.</li>
                                </ul>

                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-4">
                            <div class="pull-right text-right prices-right">
                                <h3 class="price">CHF 560.- <span>/h</span></h3>
                                <h4 class="estimated-hours">estimated hours: 8</h4>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="border-2-bottom"></div>
                <div class="row total-price-row">
                    <div class="col-xs-12 col-sm-6">
                        <div class="title-price pull-left">
                            <h3>estimated price</h3>
                            <p class="small">incl. VAT</p>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-6">
                        <div class="pull-right text-right prices-right">
                            <h1 class="price-discount">CHF 2880.-</h1>
                            <h4 class="estimated-hours">estimated hours: 8</h4>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12">
                        <div class="free-cancelation">
                            <div class="title-row">
                                <h4>Cost ceiling</h4>
                            </div>
                            <div class="body-row">
                                <p class="body-text small">The maximum price for your moving service is CHF 2000.-, and for cleaning service it's CHF 1200.- . The calculation of the final price and the payment will be done after the completion of the service, but it won't
                                    exceed this prices.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="border-2-bottom"></div>
                <div class="row">
                    <div class="col-xs-12">
                        <div class="form-check">
                            <label class="checkbox checked" for="checkbox"> I agree to the <a href='#'>Terms and Conditions</a> of Sholler Umzüge AG. <input type="checkbox" id="checkbox-default" name="checkbox-default" class="checkbox-default"></label>

                        </div>

                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12">
                        <movu-button primary text="Book now" custom_class="pull-right" cta></movu-button>
                    </div>
                </div>

            </section>
        </div>
    </div>
</div>
 
{% extends '@card-with-heading' %}
{% if date %}
{% block dateTitle %}
<span class="small">Valid until: {{ date }}</span>
{% endblock %}
{% endif %}
{% block cardContent %}
<div class="row">
  <div class="service main-service premium-reservation-hourly clearfix">
    <div class="col-xs-12 col-sm-8">
      <div class="premium-reservation-description">
        <h3>Moving service:</h3>
        <h4>including:</h4>
        {% render '@lists' %}
      </div>
    </div>
    <div class="col-xs-12 col-sm-4">
      <div class="pull-right text-right prices-right">
        <h3 class="price">CHF 560.- <span>/h</span></h3>
        <h4 class="estimated-hours">estimated hours: {{ hours }}</h4>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="service subservice fixed clearfix">
    <div class="col-xs-12 col-sm-8">
      <div class="subservice-name">
        <h3>furniture lift</h3>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4">
      <div class="pull-right text-right prices-right">
        <h3 class="price">CHF 100.-</h3>
      </div>
    </div>
  </div>
</div>
<div class="border-2-bottom"></div>
<div class="row">
  <div class="service main-service premium-reservation-hourly clearfix">
    <div class="col-xs-12 col-sm-8">
      <div class="premium-reservation-description">
        <h3>Cleaning service</h3>
        <h4>including:</h4>
        {% render '@lists' %}
      </div>
    </div>
    <div class="col-xs-12 col-sm-4">
      <div class="pull-right text-right prices-right">
        <h3 class="price">CHF 560.- <span>/h</span></h3>
        <h4 class="estimated-hours">estimated hours: {{ hours }}</h4>
      </div>
    </div>
  </div>
</div>
<div class="border-2-bottom"></div>
<div class="row total-price-row">
  <div class="col-xs-12 col-sm-6">
    <div class="title-price pull-left">
      <h3>estimated price</h3>
      <p class="small">incl. VAT</p>
    </div>
  </div>
  <div class="col-xs-12 col-sm-6">
    <div class="pull-right text-right prices-right">
      <h1 class="price-discount">CHF 2880.-</h1>
      <h4 class="estimated-hours">estimated hours: {{ hours }}</h4>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-xs-12">
    <div class="free-cancelation">
      <div class="title-row">
        <h4>Cost ceiling</h4>
      </div>
      <div class="body-row">
        <p class="body-text small">The maximum price for your moving service is CHF 2000.-, and for cleaning service it's CHF 1200.- . The calculation of the final price and the payment will be done after the completion of the service, but it won't
          exceed this prices.</p>
      </div>
    </div>
  </div>
</div>
<div class="border-2-bottom"></div>
<div class="row">
  <div class="col-xs-12">
    {% render '@checkbox--checked', { checkboxText: "I agree to the <a href='#'>Terms and Conditions</a> of Sholler Umzüge AG."}, true %}
  </div>
</div>
<div class="row">
  <div class="col-xs-12">
    <movu-button primary text="Book now" custom_class="pull-right"cta></movu-button>
  </div>
</div>
{% endblock %}
 
{
  "cardTitle": "Your offer",
  "date": "31.10.2018",
  "cardClass": "movu-card-premium-reservation",
  "hours": "8"
}

No notes defined.