Preview link for the Audi Prototype

Modal

Preview:

Configuration:

Modal size:

Output:

Vue component

            
<Modal size="basic">
    <template v-slot:header>
        <h4 class="headline-3 font-weight-bold">Modal header</h4>
    </template>
    <template v-slot:body>
        Modal Body
    </template>
</Modal>

Raw HTML

            


<body class=""> 


<div class="modal  ">
  <div class="modal-wrapper">
    <div class="modal-content">
      <div class="modal-header">
        <svg focusable="false" width="36" height="36" role="button">
          <use xlink:href="icons/custom-sprite.svg#close"></use>
        </svg>
        <h4 class="headline-3 font-weight-bold">Modal header</h4>
      </div>
      <div class="modal-body">
        Modal Body
      </div>
    </div>
  </div>
</div>

Comments

To open the modal:
<body class="modal-open">
<div class="modal show">