Modals

Modals are flexible dialog prompts.

Modals utilize the HTML dialog element. You will need to implement your own JS to open/close the modals. Open with showModal(), and close with close().

Add a dialog element with the modal class. You can add child elements with the modal-header, modal-body and modal-footer - any or all of them.

<dialog class="modal" id="modal-id">
  <div class="modal-content">
    <div class="modal-header">
      <div class="modal-title">Title</div>
      <div class="modal-subtitle">Subtitle</div>
    </div>
    <div class="modal-body">
      ...
    </div>
    <div class="modal-footer">
      ...
    </div>
    <button class="btn btn-text modal-close"><i class="icon icon-cross"></i></button>
  </div>
</dialog>

Modal sizes#

Small Modal Large Modal Fullscreen Modal

• Use the modal-sm class for a smaller modal.
• Use the modal-lg class for a larger modal.
• Use the modal-fs class for a fullscreen modal.

<dialog class="modal modal-sm" id="modal-id">
  <!-- modal content here -->
</dialog>

<dialog class="modal modal-lg" id="modal-id">
  <!-- modal content here -->
</dialog>

<dialog class="modal modal-fs" id="modal-id">
  <!-- modal content here -->
</dialog>