Design system

Modals

Modal code

If there is only one button in the footer, it will be right-aligned. pm-modalFooter is not mandatory.

<div class="pm-modalOverlay">
  <dialog class="pm-modal" role="dialog" open aria-labelledby="modalTitle">
    <header class="pm-modalHeader">
      <button type="button" class="pm-modalClose" title="Close">
        <svg viewBox="0 0 16 16" class="icon-16p fill-global-grey" role="img" aria-hidden="true" focusable="false">
          <use xlink:href="#shape-off"></use>
        </svg>
        <span class="sr-only">Close</span>
      </button>
      <h1 id="modalTitle" class="pm-modalTitle">Title for your modal</h1>
    </header>
	<div class="pm-modalContent">
	  <div class="pm-modalContentInnerTopShadow nonvisible"></div>
	  <div class="pm-modalContentInner">…</div>
	  <div class="pm-modalContentInnerBottomShadow nonvisible"></div>
      <footer class="pm-modalFooter flex flex-spacebetween">
        <button class="pm-button-blueborder">No</button>
        <button class="pm-button-blue">Yes</button>
      </footer>
    </div>
  </dialog>
</div>

When closing the modal, the class pm-modalOverlayOut is added on pm-modalOverlay and pm-modalOut is added on pm-modal, let this animation execute itself before removing the code in the DOM (500ms duration).

In case of several modals, the modals that have to be put in background must have pm-modal--inBackground modifier class.

For different widths, you have pm-modal--wider and pm-modal--smaller modifiers. pm-modal--auto set the modal width to auto (use it wisely)

For special cases for height issues, you may use pm-modal--heightAuto modifier: the modal will take the height that its content needs.