Modal

Base

Schedule Preferences

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae nibh sit amet massa fringilla luctus in ac sapien. Nunc eget turpis nec lacus euismod ultrices. Phasellus iaculis ligula at rhoncus lobortis. Praesent vehicula tempor laoreet. Aliquam ultricies orci quis neque porttitor, sit amet maximus magna eleifend. Vivamus ac neque sit amet massa facilisis lobortis vel vitae elit. Aliquam sit amet purus et orci maximus venenatis eu mollis tellus. Nunc dignissim vehicula nibh at malesuada. Nullam sapien felis, fermentum vitae vulputate a, faucibus sit amet justo. Nam dictum placerat est, sed ultrices sapien. Mauris pharetra bibendum elit, a ornare ex. Integer ultricies congue erat, a semper eros finibus sit amet. Nunc imperdiet urna quis volutpat vestibulum. Phasellus sed mi pharetra orci feugiat bibendum in et nunc. Phasellus varius ut nulla non luctus.

Quisque dapibus ultricies diam, et sagittis velit sagittis non. Suspendisse pulvinar at dui volutpat porta. Vivamus et lorem sed dolor ultrices viverra. Phasellus maximus tristique ante, ut lobortis risus rhoncus eleifend. In hac habitasse platea dictumst. Praesent posuere, nibh vitae bibendum iaculis, ipsum odio consectetur mauris, sit amet auctor diam odio sed justo. Cras gravida est in odio pulvinar, quis gravida risus venenatis. Morbi in convallis justo. Vestibulum pretium ipsum ultricies, sodales tellus id, bibendum massa. Donec quis condimentum est, nec consequat nisl. Aenean sed metus dui. Nam vel pretium sapien, eget venenatis turpis. Maecenas vehicula orci nunc. Proin rutrum ex at augue imperdiet, vitae malesuada diam vulputate.

Mauris egestas bibendum diam. Sed eget pellentesque lacus. Curabitur ac nibh consectetur, sodales felis id, fringilla dui. Integer posuere lorem vitae dui posuere, sed molestie metus scelerisque. Nullam eu ultrices mi. Aenean dolor nisi, viverra in suscipit vel, dictum id ante. Cras mollis lorem a est tincidunt, eu hendrerit tellus mattis.

<button class="Button" data-control="modal" data-open="modal-one">
  Open Modal
</button>

<div class="Modal" data-modal="modal-one">
  <div class="Modal-content">
    <div class="Modal-header">
      <h2 class="Modal-title">Schedule Preferences</h2>
    </div>
    <div class="Modal-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae nibh sit amet massa fringilla luctus in ac sapien. Nunc eget turpis nec lacus euismod ultrices. Phasellus iaculis ligula at rhoncus lobortis. Praesent vehicula tempor laoreet. Aliquam ultricies orci quis neque porttitor, sit amet maximus magna eleifend. Vivamus ac neque sit amet massa facilisis lobortis vel vitae elit. Aliquam sit amet purus et orci maximus venenatis eu mollis tellus. Nunc dignissim vehicula nibh at malesuada. Nullam sapien felis, fermentum vitae vulputate a, faucibus sit amet justo. Nam dictum placerat est, sed ultrices sapien. Mauris pharetra bibendum elit, a ornare ex. Integer ultricies congue erat, a semper eros finibus sit amet. Nunc imperdiet urna quis volutpat vestibulum. Phasellus sed mi pharetra orci feugiat bibendum in et nunc. Phasellus varius ut nulla non luctus.</p>
      <p>Quisque dapibus ultricies diam, et sagittis velit sagittis non. Suspendisse pulvinar at dui volutpat porta. Vivamus et lorem sed dolor ultrices viverra. Phasellus maximus tristique ante, ut lobortis risus rhoncus eleifend. In hac habitasse platea dictumst. Praesent posuere, nibh vitae bibendum iaculis, ipsum odio consectetur mauris, sit amet auctor diam odio sed justo. Cras gravida est in odio pulvinar, quis gravida risus venenatis. Morbi in convallis justo. Vestibulum pretium ipsum ultricies, sodales tellus id, bibendum massa. Donec quis condimentum est, nec consequat nisl. Aenean sed metus dui. Nam vel pretium sapien, eget venenatis turpis. Maecenas vehicula orci nunc. Proin rutrum ex at augue imperdiet, vitae malesuada diam vulputate.</p>
      <p>Mauris egestas bibendum diam. Sed eget pellentesque lacus. Curabitur ac nibh consectetur, sodales felis id, fringilla dui. Integer posuere lorem vitae dui posuere, sed molestie metus scelerisque. Nullam eu ultrices mi. Aenean dolor nisi, viverra in suscipit vel, dictum id ante. Cras mollis lorem a est tincidunt, eu hendrerit tellus mattis.</p>
    </div>
    <div class="Modal-footer">
      <button class="Button Button--negative" data-dismiss="modal">
        <svg viewBox="0 0 960 960" role="presentation" class="Icon">
          <path d="M628 480l189 190c8.7 8 13.7 17.5 15 28.5s-1.3 20.2-8 27.5c-28.7 36.7-61.3 69.3-98 98-7.3 6.7-16.5 9.3-27.5 8s-20.8-6-29.5-14L480 628 290 818c-8 8-17.5 12.7-28.5 14s-20.5-1.3-28.5-8c-36-28.7-68.3-61-97-97-6.7-8-9.3-17.5-8-28.5 1.3-11 6-20.5 14-28.5l190-190-189-189c-8.7-8.7-13.7-18.5-15-29.5-1.3-11 1.3-20.2 8-27.5 28-36 60.3-68.7 97-98 8-6.7 17.5-9.3 28.5-8s20.5 6.3 28.5 15l190 181 189-181c8.7-8.7 18.5-13.7 29.5-15s20.2 1.3 27.5 8c36.7 28.7 69.3 61.3 98 98 6.7 7.3 9.3 16.5 8 27.5s-6.3 20.8-15 29.5L628 480z" />
        </svg>
        Cancel
      </button>
      <button class="Button Button--primary" data-dismiss="modal">
        <svg viewBox="0 0 960 960" role="presentation" class="Icon">
          <path d="M915 178.9c8 6.7 12.3 15.5 13 26.5s-2.3 21.2-9 30.5c-252.7 360.7-389.3 555.3-410 584-21.3 28.7-48.8 43.2-82.5 43.5S365 849.2 343 819.9l-278-391c-6.7-9.3-9.7-19.7-9-31s5-20.3 13-27c34-29.3 72-55.7 114-79 8.7-4.7 18.3-5.3 29-2s19.3 9.7 26 19l188 264 321-456c6.7-9.3 15.2-15.5 25.5-18.5s20.2-2.2 29.5 2.5c44 24 81.7 50 113 78z" />
        </svg>
        Save
      </button>
    </div>
  </div>
</div>

Added Dismissals

You can add a background dismissal or icon dismissal elements to give more options on how to close the modal

  • Modal-iconDismiss
  • Modal-bgDismiss

Schedule Preferences

Click the background overlay, or x in the upper right as other ways to close

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae nibh sit amet massa fringilla luctus in ac sapien. Nunc eget turpis nec lacus euismod ultrices. Phasellus iaculis ligula at rhoncus lobortis. Praesent vehicula tempor laoreet. Aliquam ultricies orci quis neque porttitor, sit amet maximus magna eleifend. Vivamus ac neque sit amet massa facilisis lobortis vel vitae elit. Aliquam sit amet purus et orci maximus venenatis eu mollis tellus. Nunc dignissim vehicula nibh at malesuada. Nullam sapien felis, fermentum vitae vulputate a, faucibus sit amet justo. Nam dictum placerat est, sed ultrices sapien. Mauris pharetra bibendum elit, a ornare ex. Integer ultricies congue erat, a semper eros finibus sit amet. Nunc imperdiet urna quis volutpat vestibulum. Phasellus sed mi pharetra orci feugiat bibendum in et nunc. Phasellus varius ut nulla non luctus.

<button class="Button" data-control="modal" data-open="modal-two">
  Open Modal
</button>

<div class="Modal Modal--clickableBg" data-modal="modal-two">
  <div class="Modal-bgDismiss" data-dismiss="modal"></div>
  <div class="Modal-content">
    <svg viewBox="0 0 960 960" class="Icon Modal-iconDismiss" data-dismiss="modal">
      <path d="M628 480l189 190c8.7 8 13.7 17.5 15 28.5s-1.3 20.2-8 27.5c-28.7 36.7-61.3 69.3-98 98-7.3 6.7-16.5 9.3-27.5 8s-20.8-6-29.5-14L480 628 290 818c-8 8-17.5 12.7-28.5 14s-20.5-1.3-28.5-8c-36-28.7-68.3-61-97-97-6.7-8-9.3-17.5-8-28.5 1.3-11 6-20.5 14-28.5l190-190-189-189c-8.7-8.7-13.7-18.5-15-29.5-1.3-11 1.3-20.2 8-27.5 28-36 60.3-68.7 97-98 8-6.7 17.5-9.3 28.5-8s20.5 6.3 28.5 15l190 181 189-181c8.7-8.7 18.5-13.7 29.5-15s20.2 1.3 27.5 8c36.7 28.7 69.3 61.3 98 98 6.7 7.3 9.3 16.5 8 27.5s-6.3 20.8-15 29.5L628 480z"></path>
    </svg>
    <div class="Modal-header">
      <h2 class="Modal-title">Schedule Preferences</h2>
    </div>
    <div class="Modal-body">
      <strong>Click the background overlay, or x in the upper right as other ways to close</strong>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae nibh sit amet massa fringilla luctus in ac sapien. Nunc eget turpis nec lacus euismod ultrices. Phasellus iaculis ligula at rhoncus lobortis. Praesent vehicula tempor laoreet. Aliquam ultricies orci quis neque porttitor, sit amet maximus magna eleifend. Vivamus ac neque sit amet massa facilisis lobortis vel vitae elit. Aliquam sit amet purus et orci maximus venenatis eu mollis tellus. Nunc dignissim vehicula nibh at malesuada. Nullam sapien felis, fermentum vitae vulputate a, faucibus sit amet justo. Nam dictum placerat est, sed ultrices sapien. Mauris pharetra bibendum elit, a ornare ex. Integer ultricies congue erat, a semper eros finibus sit amet. Nunc imperdiet urna quis volutpat vestibulum. Phasellus sed mi pharetra orci feugiat bibendum in et nunc. Phasellus varius ut nulla non luctus.</p>
    </div>
    <div class="Modal-footer">
      <button class="Button Button--negative" data-dismiss="modal">
        <svg viewBox="0 0 960 960" role="presentation" class="Icon">
          <path d="M628 480l189 190c8.7 8 13.7 17.5 15 28.5s-1.3 20.2-8 27.5c-28.7 36.7-61.3 69.3-98 98-7.3 6.7-16.5 9.3-27.5 8s-20.8-6-29.5-14L480 628 290 818c-8 8-17.5 12.7-28.5 14s-20.5-1.3-28.5-8c-36-28.7-68.3-61-97-97-6.7-8-9.3-17.5-8-28.5 1.3-11 6-20.5 14-28.5l190-190-189-189c-8.7-8.7-13.7-18.5-15-29.5-1.3-11 1.3-20.2 8-27.5 28-36 60.3-68.7 97-98 8-6.7 17.5-9.3 28.5-8s20.5 6.3 28.5 15l190 181 189-181c8.7-8.7 18.5-13.7 29.5-15s20.2 1.3 27.5 8c36.7 28.7 69.3 61.3 98 98 6.7 7.3 9.3 16.5 8 27.5s-6.3 20.8-15 29.5L628 480z" />
        </svg>
        Cancel
      </button>
      <button class="Button Button--primary" data-dismiss="modal">
        <svg viewBox="0 0 960 960" role="presentation" class="Icon">
          <path d="M915 178.9c8 6.7 12.3 15.5 13 26.5s-2.3 21.2-9 30.5c-252.7 360.7-389.3 555.3-410 584-21.3 28.7-48.8 43.2-82.5 43.5S365 849.2 343 819.9l-278-391c-6.7-9.3-9.7-19.7-9-31s5-20.3 13-27c34-29.3 72-55.7 114-79 8.7-4.7 18.3-5.3 29-2s19.3 9.7 26 19l188 264 321-456c6.7-9.3 15.2-15.5 25.5-18.5s20.2-2.2 29.5 2.5c44 24 81.7 50 113 78z" />
        </svg>
        Save
      </button>
    </div>
  </div>
</div>