Modal

Modal is positioned over everything else in the document and remove scroll from the <body> so that modal content scrolls instead.

Static Modal

Below is a static modal example (meaning its position and display have been overridden). Included are the modal header, modal body (required for padding), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.

Copy
  
  <div class="modal">
      <header class="modal-heading flex-row">
        <h4>Modal Title</h4>
        <span class="icon-md">X</span>
      </header>
      <hr class="horizontal-line" />
      <section class="modal-body">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Expedita natus consequuntur recusandae placeat, numquam
          quibusdam nam eaque quis possimus corrupti.
        </p>
      </section>
      <hr class="horizontal-line" />
      <footer class="modal-footer flex-row">
        <button class="btn btn-primary">Close</button>
        <button class="btn btn-secondary">Save</button>
      </footer>
  </div>
  

Input Modal

Below is a input modal asking for input from user. Included are the modal header, modal body, and modal footer (optional). We have used <input> tag for taking input from user.

Copy
 
  <div class="modal">
      <section class="modal-heading flex-row">
        <h4>Modal Title</h4>
        <span class="icon-md">X</span>
      </section>

      <section class="modal-body flex-col">
        <p>First Name</p>
        <input type="text" class="modal-input" />
        <p>Last Name</p>
        <input type="text" class="modal-input" />
      </section>

      <footer class="modal-footer flex-row">
        <button class="btn btn-primary">Close</button>
        <button class="btn btn-secondary">Save</button>
      </footer>
 </div>
 