MOVU Components

Modal Default: Discount 

<button class="button-primary button-default button-default-size" onclick="this.blur();" data-toggle="modal" data-target="#exampleModalCenter"> Click me</button>
<!-- Modal -->
<div class=" movu-modal modal-dialog modal-dialog-centered modal" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-content">
        <div class="modal-header">
            <div class="around-close pull-right" class="close" data-dismiss="modal" aria-label="Close">
                <i class="material-icons pull-right">close</i>
            </div>
        </div>

        <div class="basic-discount">
            <div class="row">
                <div class="col-xs-10 col-xs-offset-1 col-sm-10 col-sm-offset-1">
                    <h2 class="modal-title">10% discount on high-quality mattresses</h2>
                    <p class="text-center code">Voucher Code:</p>
                    <p class="text-center code-id">MOVU18</p>
                </div>
                <div class="col-sm-10 col-sm-offset-1">
                    <div class="row hidden-xs">
                        <div class="col-sm-6">
                            <button class="button-secondary button-default button-default-size" onclick="this.blur();"> download pdf</button>

                        </div>
                        <div class="col-sm-6">
                            <button class="button-primary button-default button-default-size" onclick="this.blur();"> claim now</button>
                        </div>
                    </div>

                    <div class="row visible-xs">
                        <div class="col-xs-10 col-xs-offset-1 no-padding">
                            <button class="button-primary button-default button-default-size" onclick="this.blur();"> claim now</button>
                        </div>
                        <div class="col-xs-10 col-xs-offset-1 no-padding">
                            <button class="button-secondary button-default button-default-size" onclick="this.blur();"> download pdf</button>

                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
 
<!-- Button trigger modal -->
{% extends "@modal-template" %}
{% block content %}
<div class="basic-discount">
  <div class="row">
    <div class="col-xs-10 col-xs-offset-1 col-sm-10 col-sm-offset-1">
      <h2 class="modal-title">10% discount on high-quality mattresses</h2>
      <p class="text-center code">Voucher Code:</p>
      <p class="text-center code-id">MOVU18</p>
    </div>
    <div class="col-sm-10 col-sm-offset-1">
      <div class="row hidden-xs">
        <div class="col-sm-6">
          {% render "@button-secondary", {buttonText: "download pdf"}, true %}
        </div>
        <div class="col-sm-6">
          {% render "@button-primary", {buttonText: "claim now"}, true %}
        </div>
      </div>

      <div class="row visible-xs">
        <div class="col-xs-10 col-xs-offset-1 no-padding">
          {% render "@button-primary", {buttonText: "claim now"}, true %}
        </div>
        <div class="col-xs-10 col-xs-offset-1 no-padding">
          {% render "@button-secondary", {buttonText: "download pdf"}, true %}
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}
 
/* No context defined. */

No notes defined.