Version: Next

Modal

Modals focus the user’s attention exclusively on one task or piece of information via a window that sits on top of the page content.

The element with qtm-modal class is a main container with the following classes structure:

qtm-modal-overlay: a screen overlay that obscures the on-page content.
qtm-modal-content: a centered container, in which you can include any content. This container is composed of divider and three distinct zones: A header, the body, and a footer.
qtm-modal-header which usually contains a title qtm-modal-title, a subtitle qtm-modal-subtitle, and the close icon.
- qtm-modal-body which contains the information and/or controls needed to complete the modal’s task. It can include message text and components.
- qtm-modal-divider which is divider between body and footer.
- qtm-modal-footer which contains the main actions needed to complete or cancel the dialog task.

Button

Dialog Modal

Caption placeholder

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam doloribus vero officia molestias quam animi dolor atque temporibus, voluptatibus inventore, fugiat minima consectetur veniam repudiandae voluptas iusto nostrum. Enim, quos.

Cancel

Confirm

<button class="qtm-button qtm-filled qtm-primary">Button</button>

<div class="qtm-modal">
  <div class="qtm-modal-overlay"></div>

  <div class="qtm-modal-content">
    <div class="qtm-modal-header">
      <div class="qtm-modal-title">
        <i
          class="qtm-icon material-icons text-primary-500 dark:text-bluegrey-25"
          >warning</i
        >
        <div>
          <p>Dialog Modal</p>
          <p class="qtm-modal-subtitle">Caption placeholder</p>
        </div>
      </div>
      <button class="qtm-button qtm-primary qtm-ghost">
        <i class="qtm-material-icons qtm-icon">close</i>
      </button>
    </div>

    <div class="qtm-modal-body">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, tempore
        pariatur consectetur id autem ducimus odio harum, soluta quos illum
        placeat adipisci sunt quaerat explicabo hic dolores quidem quam neque.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi, optio
        quibusdam ipsam omnis, eum neque earum corporis mollitia reiciendis sint
        molestiae excepturi illo laudantium architecto asperiores quae, culpa
        tenetur. Modi?
      </p>
    </div>

    <div class="qtm-modal-divider"></div>

    <div class="qtm-modal-footer qtm-justify-between">
      <button class="qtm-button qtm-primary qtm-ghost">Cancel</button>
      <button class="qtm-button qtm-primary qtm-filled">Confirm</button>
    </div>
  </div>
</div>

Size

There are three .qtm-modal-header sizes: .qtm-small, .qtm-medium and .lqtm-arge. You can use these classes to control font size of icon and title in modal header.

Modal small

Dialog Modal

Caption placeholder

Cancel

Confirm

Modal medium

Dialog Modal

Caption placeholder

Cancel

Confirm

Modal large

Dialog Modal

Caption placeholder

Cancel

Confirm

<button class="qtm-button qtm-filled qtm-primary">Modal small</button>

<div class="qtm-modal">
  <div class="qtm-modal-overlay"></div>

  <div class="qtm-modal-content">
    <div class="qtm-modal-header qtm-small">
      <div class="qtm-modal-title">
        <i
          class="qtm-icon material-icons text-primary-500 dark:text-bluegrey-25"
          >warning</i
        >
        <div>
          <p>Dialog Modal</p>
          <p class="qtm-modal-subtitle">Caption placeholder</p>
        </div>
      </div>
      <button class="qtm-button qtm-primary qtm-ghost qtm-small">
        <i class="material-icons qtm-icon">close</i>
      </button>
    </div>

    <div class="qtm-modal-body">...</div>

    <div class="qtm-modal-divider"></div>

    <div class="qtm-modal-footer justify-between">
      <button class="qtm-button qtm-primary qtm-ghost qtm-small">Cancel</button>
      <button class="qtm-button qtm-primary qtm-filled qtm-small">Confirm</button>
    </div>
  </div>
</div>

Custom action buttons

You can use utility classes to style footer layout.

Button

Dialog Modal

Caption placeholder

Cancel

Confirm

<div class="qtm-modal">
    ...
        <div class="qtm-modal-footer flex-col space-y-xs">
            <button class="qtm-button qtm-primary qtm-ghost w-full justify-center">Cancel</button>
            <button class="qtm-button qtm-primary qtm-filled w-full justify-center">Confirm</button>
        </div>
    </div>
</div>

Size​

Custom action buttons​

Size

Custom action buttons