Modal

Modals are windows used for displaying prompts and subtasks without losing context of the parent application.

This component requires Javascript

Examples

Modals are composed of several parts. To render a modal, include a modal backdrop, modal header, modal body, and modal footer (optional). By default modals are positioned on top of the page.

Base

<div class="m-backdrop">
  <div class="m-backdrop__wrapper">
    <section class="a-modal" role="dialog" aria-label="Modal description" aria-modal="true">
      <header class="a-modal__header">
        <h2 class="a-modal__title">Modal Title</h2>
        <button class="a-btn -icon -close" aria-label="Close">
          <div class="a-btn__content">
            <i class="a-icon icon-x"></i>
          </div>
        </button>
      </header>
      <div class="a-modal__content">
        <p class="-text -m--0">Modal content</p>
      </div>
      <footer class="a-modal__footer">
        <button class="a-btn">Cancel</button>
        <button class="a-btn -primary -ml--2">Save</button>
      </footer>
    </section>
  </div>
</div>

Center

Modals can also be placed in the middle of the page by applying the class -center in the m-backdrop.

<div class="m-backdrop -center">
  <div class="m-backdrop__wrapper">
    <section class="a-modal" role="dialog" aria-label="Modal description" aria-modal="true">
      <header class="a-modal__header">
        <h2 class="a-modal__title">Modal Title</h2>
        <button class="a-btn -icon -close" aria-label="Close">
          <div class="a-btn__content">
            <i class="a-icon icon-x"></i>
          </div>
        </button>
      </header>
      <div class="a-modal__content">
        <p class="-text -m--0">Modal content</p>
      </div>
      <footer class="a-modal__footer">
        <button class="a-btn">Cancel</button>
        <button class="a-btn -primary -ml--2">Save</button>
      </footer>
    </section>
  </div>
</div>

Scrollable

Enable scrolling if the height of the modal's content is larger than the modal's content container.

Requirements

A max-height must be defined on a-modal__content. Use max-height utility classes such as -mh--400 or -mh--480, or define your own value.

<div class="m-backdrop">
  <div class="m-backdrop__wrapper">
    <section class="a-modal" role="dialog" aria-label="Modal description" aria-modal="true">
      <header class="a-modal__header">
        <h2 class="a-modal__title">Modal Title</h2>
        <button class="a-btn -icon -close" aria-label="Close">
          <div class="a-btn__content">
            <i class="a-icon icon-x"></i>
          </div>
        </button>
      </header>
      <div class="a-modal__content -mh--400">
        <p class="-text -mt--0">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at hendrerit lacus. Nunc ornare sollicitudin arcu vitae viverra. Nam in aliquam augue. Nunc dignissim purus sed massa consequat dictum.
        </p>
        <p class="-text">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at hendrerit lacus. Nunc ornare sollicitudin arcu vitae viverra. Nam in aliquam augue. Nunc dignissim purus sed massa consequat dictum.
        </p>
        <p class="-text">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at hendrerit lacus. Nunc ornare sollicitudin arcu vitae viverra. Nam in aliquam augue. Nunc dignissim purus sed massa consequat dictum.
        </p>
        <p class="-text">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at hendrerit lacus. Nunc ornare sollicitudin arcu vitae viverra. Nam in aliquam augue. Nunc dignissim purus sed massa consequat dictum.
        </p>
        <p class="-text">
          Nam volutpat tellus sapien, ac aliquam nisl mattis id. Etiam laoreet malesuada tristique. Morbi luctus facilisis laoreet. Sed pharetra diam consequat, ultrices sem facilisis, ornare urna. Suspendisse nec mollis massa.
          Praesent ipsum purus, euismod quis mattis et, scelerisque in erat. Etiam laoreet dolor non suscipit laoreet. Sed nec mauris vitae ipsum mollis laoreet et sed nisi. In at metus eget neque consequat pellentesque. Aliquam erat volutpat.
          Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque egestas ultricies justo, vel scelerisque justo. Aliquam mollis diam ac ligula feugiat placerat sed iaculis urna. Donec in mi consequat,
          cursus ante non, pulvinar eros. Phasellus viverra massa venenatis, pellentesque lectus auctor, condimentum nibh. Donec malesuada magna sed libero tincidunt, id tempus lectus mollis.
        </p>
      </div>
      <footer class="a-modal__footer">
        <button class="a-btn">Cancel</button>
        <button class="a-btn -primary -ml--2">Save</button>
      </footer>
    </section>
  </div>
</div>

Scrolling long content

Enable scrolling when modals become too long for the user’s viewport or device, they scroll independent of the page itself.

<div class="m-backdrop -mh--480">
  <div class="m-backdrop__wrapper">
    <section class="a-modal" role="dialog" aria-label="Modal description" aria-modal="true">
      <header class="a-modal__header">
        <h2 class="a-modal__title">Modal Title</h2>
        <button class="a-btn -icon -close" aria-label="Close">
          <div class="a-btn__content">
            <i class="a-icon icon-x"></i>
          </div>
        </button>
      </header>
      <div class="a-modal__content">
        <p class="-text -mt--0">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at hendrerit lacus. Nunc ornare sollicitudin arcu vitae viverra. Nam in aliquam augue. Nunc dignissim purus sed massa consequat dictum.
        </p>
        <p class="-text">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at hendrerit lacus. Nunc ornare sollicitudin arcu vitae viverra. Nam in aliquam augue. Nunc dignissim purus sed massa consequat dictum.
        </p>
        <p class="-text">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at hendrerit lacus. Nunc ornare sollicitudin arcu vitae viverra. Nam in aliquam augue. Nunc dignissim purus sed massa consequat dictum.
        </p>
        <p class="-text">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at hendrerit lacus. Nunc ornare sollicitudin arcu vitae viverra. Nam in aliquam augue. Nunc dignissim purus sed massa consequat dictum.
        </p>
        <p class="-text">
          Nam volutpat tellus sapien, ac aliquam nisl mattis id. Etiam laoreet malesuada tristique. Morbi luctus facilisis laoreet. Sed pharetra diam consequat, ultrices sem facilisis, ornare urna. Suspendisse nec mollis massa.
          Praesent ipsum purus, euismod quis mattis et, scelerisque in erat. Etiam laoreet dolor non suscipit laoreet. Sed nec mauris vitae ipsum mollis laoreet et sed nisi. In at metus eget neque consequat pellentesque. Aliquam erat volutpat.
          Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque egestas ultricies justo, vel scelerisque justo. Aliquam mollis diam ac ligula feugiat placerat sed iaculis urna. Donec in mi consequat,
          cursus ante non, pulvinar eros. Phasellus viverra massa venenatis, pellentesque lectus auctor, condimentum nibh. Donec malesuada magna sed libero tincidunt, id tempus lectus mollis.
        </p>
      </div>
      <footer class="a-modal__footer">
        <button class="a-btn">Cancel</button>
        <button class="a-btn -primary -ml--2">Save</button>
      </footer>
    </section>
  </div>
</div>

With Subtitle

<div class="m-backdrop">
  <div class="m-backdrop__wrapper">
    <section class="a-modal" role="dialog" aria-label="Modal description" aria-modal="true">
      <header class="a-modal__header">
        <h2 class="a-modal__title">Modal Title</h2>
        <h3 class="a-modal__subtitle">Modal subtitle</h3>
        <button class="a-btn -icon -close" aria-label="Close">
          <div class="a-btn__content">
            <i class="a-icon icon-x"></i>
          </div>
        </button>
      </header>
      <div class="a-modal__content">
        <p class="-text -m--0">Modal content</p>
      </div>
      <footer class="a-modal__footer">
        <button class="a-btn">Cancel</button>
        <button class="a-btn -primary -ml--2">Save</button>
      </footer>
    </section>
  </div>
</div>

Inverse Backdrop

Invert a modals backdrop by applying the class -inverse.

<div class="m-backdrop -inverse">
  <div class="m-backdrop__wrapper">
    <section class="a-modal" role="dialog" aria-label="Modal description" aria-modal="true">
      <header class="a-modal__header">
        <h2 class="a-modal__title">Modal Title</h2>
        <button class="a-btn -icon -close" aria-label="Close">
          <div class="a-btn__content">
            <i class="a-icon icon-x"></i>
          </div>
        </button>
      </header>
      <div class="a-modal__content">
        <p class="-text -m--0">Modal content</p>
      </div>
      <footer class="a-modal__footer">
        <button class="a-btn">Cancel</button>
        <button class="a-btn -primary -ml--2">Save</button>
      </footer>
    </section>
  </div>
</div>

Borderless

Disable header or footer borders by applying the class -noBorder to a-modal__header or a-modal__footer.

<div class="m-backdrop">
  <div class="m-backdrop__wrapper">
    <section class="a-modal" role="dialog" aria-label="Modal description" aria-modal="true">
      <header class="a-modal__header -noBorder">
        <h2 class="a-modal__title">Modal Title</h2>
        <button class="a-btn -icon -close" aria-label="Close">
          <div class="a-btn__content">
            <i class="a-icon icon-x"></i>
          </div>
        </button>
      </header>
      <div class="a-modal__content">
        <p class="-text -m--0">Modal content</p>
      </div>
      <footer class="a-modal__footer -noBorder">
        <button class="a-btn">Cancel</button>
        <button class="a-btn -primary -ml--2">Save</button>
      </footer>
    </section>
  </div>
</div>

Multi-step

For multi-step modals, ensure the class -centered is applied to a-modal__title. This will provide sufficient real estate on the left side to store a back button a-modal__back.

<div class="m-backdrop">
  <div class="m-backdrop__wrapper">
    <section class="a-modal" role="dialog" aria-label="Modal description" aria-modal="true">
      <header class="a-modal__header">
        <h2 class="a-modal__title -centered">Modal Title</h2>
        <button class="a-modal__back" aria-label="Back"></button>
        <button class="a-btn -icon -close" aria-label="Close">
          <div class="a-btn__content">
            <i class="a-icon icon-x"></i>
          </div>
        </button>
      </header>
      <div class="a-modal__content">
        <p class="-text -m--0">Modal content</p>
      </div>
      <footer class="a-modal__footer">
        <button class="a-btn -primary -ml--2">Next</button>
      </footer>
    </section>
  </div>
</div>

Simple

Remove a-modal__header and a-modal__footer for a simple and customizable modal.

<div class="m-backdrop">
  <div class="m-backdrop__wrapper">
    <section class="a-modal" role="dialog" aria-label="Modal description" aria-modal="true">
      <button class="a-btn -icon -close" aria-label="Close">
        <div class="a-btn__content">
          <i class="a-icon icon-x"></i>
        </div>
      </button>
      <div class="a-modal__content -text--center -p--6">
        <h2 class="a-h3 -text--bolder -m--0">Modal Title</h2>
        <p class="-text -py--1 -px--3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mollis nulla, eget ornare tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet rutrum eros laoreet.</p>
        <button class="a-btn -primary -lg -mt--1">Action</button>
      </div>
    </section>
  </div>
</div>