Modals are windows used for displaying prompts and subtasks without losing context of the parent application.
This component requires Javascript
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.
Modal content
<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>
Modals can also be placed in the middle of the page by applying the class -center in the m-backdrop.
Modal content
<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>
Enable scrolling if the height of the modal's content is larger than the modal's content container.
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.
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.
Integer sed ligula pulvinar, posuere sem nec, varius risus. Vivamus facilisis, eros quis tempus accumsan, nulla ligula aliquam nulla, sed porttitor quam quam auctor diam. Nullam vitae placerat arcu, a suscipit neque.
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.
Integer sed ligula pulvinar, posuere sem nec, varius risus. Vivamus facilisis, eros quis tempus accumsan, nulla ligula aliquam nulla, sed porttitor quam quam auctor diam. Nullam vitae placerat arcu, a suscipit neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque ac odio quis sem placerat porta vel nec leo. Phasellus et malesuada nisi.
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.
<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>
Enable scrolling when modals become too long for the user’s viewport or device, they scroll independent of the page itself.
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.
Integer sed ligula pulvinar, posuere sem nec, varius risus. Vivamus facilisis, eros quis tempus accumsan, nulla ligula aliquam nulla, sed porttitor quam quam auctor diam. Nullam vitae placerat arcu, a suscipit neque.
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.
Integer sed ligula pulvinar, posuere sem nec, varius risus. Vivamus facilisis, eros quis tempus accumsan, nulla ligula aliquam nulla, sed porttitor quam quam auctor diam. Nullam vitae placerat arcu, a suscipit neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque ac odio quis sem placerat porta vel nec leo. Phasellus et malesuada nisi.
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.
<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>
Modal content
<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>
Invert a modals backdrop by applying the class -inverse.
Modal content
<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>
Disable header or footer borders by applying the class -noBorder to
a-modal__header or a-modal__footer.
Modal content
<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>
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.
Modal content
<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>
Remove a-modal__header and a-modal__footer for a simple and customizable modal.
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.
<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>