Modal Styles
Modal
<button type="button" name="button" class="button js-modal-activator" data-target="#modal">Active Modal</button>
<aside class="modal js-modal" id="modal" aria-hidden="true">
<div class="wrap wrap--padded">
<div class="modal__container">
<div class="modal__header">
<h2 class="h5">Modal with Buttons</h2>
</div>
<div class="modal__body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam elementum egestas nunc. Proin eget lobortis diam. Nullam hendrerit nisl urna, vel bibendum risus dignissim in. Maecenas efficitur, neque in mattis maximus.</p>
<p>purus velit sodales tellus, ut elementum leo mauris at elit. Nulla a diam a enim interdum elementum. Curabitur luctus non massa ut viverra. Nam in molestie orci. Donec sodales elementum euismod. Integer in velit at erat iaculis dictum.</p>
</div>
<button type="button" class="icon icon--close js-modal-deactivator">
<span class="visually-hidden">Click to close modal</span>
</button>
</div>
</div>
</aside>
Modal with Buttons
<button type="button" name="button" class="button js-modal-activator" data-target="#modal-2">Active Modal with Buttons</button>
<aside class="modal js-modal" id="modal-2" aria-hidden="true">
<div class="wrap wrap--padded">
<div class="modal__container">
<div class="modal__header">
<h2 class="h5">Modal with Buttons</h2>
</div>
<div class="modal__body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam elementum egestas nunc. Proin eget lobortis diam. Nullam hendrerit nisl urna, vel bibendum risus dignissim in. Maecenas efficitur, neque in mattis maximus.</p>
<p>purus velit sodales tellus, ut elementum leo mauris at elit. Nulla a diam a enim interdum elementum. Curabitur luctus non massa ut viverra. Nam in molestie orci. Donec sodales elementum euismod. Integer in velit at erat iaculis dictum.</p>
</div>
<div class="modal__footer">
<button type="button" class="button button--tertiary button--sm modal__prev-click">Cancel</button>
<button type="button" class="button button--primary button--sm modal__next-click">Accept</button>
</div>
<button type="button" class="icon icon--close js-modal-deactivator">
<span class="visually-hidden">Click to close modal</span>
</button>
</div>
</div>
</aside>
Modal with steps
<button type="button" name="button" class="button js-modal-activator" data-target="#modal-3">Active Modal with steps</button>
<aside class="modal js-modal js-modal--step" id="modal-3" aria-hidden="true">
<div class="wrap wrap--padded">
<div class="modal__container">
<div class="modal__header">
<h2 class="h5">Modal with sections 1</h2>
</div>
<div class="modal__body modal__step">
<p>Section 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam elementum egestas nunc. Proin eget lobortis diam. Nullam hendrerit nisl urna, vel bibendum risus dignissim in. Maecenas efficitur, neque in mattis maximus.</p>
</div>
<div class="modal__body modal__step">
<p>Section 2 purus velit sodales tellus, ut elementum leo mauris at elit. Nulla a diam a enim interdum elementum. Curabitur luctus non massa ut viverra. Nam in molestie orci. Donec sodales elementum euismod. Integer in velit at erat iaculis dictum.</p>
</div>
<div class="modal__body modal__step">
<p>Section 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam elementum egestas nunc. Proin eget lobortis diam. Nullam hendrerit nisl urna, vel bibendum risus dignissim in. Maecenas efficitur, neque in mattis maximus.</p>
</div>
<div class="modal__body modal__step">
<p>Section 4 purus velit sodales tellus, ut elementum leo mauris at elit. Nulla a diam a enim interdum elementum. Curabitur luctus non massa ut viverra. Nam in molestie orci. Donec sodales elementum euismod. Integer in velit at erat iaculis dictum.</p>
</div>
<div class="modal__footer">
<button type="button" class="button button--tertiary button--sm modal__prev-click">Cancel</button>
<button type="button" class="button button--primary button--sm modal__next-click">Next</button>
</div>
<button type="button" class="icon icon--close js-modal-deactivator">
<span class="visually-hidden">Click to close modal</span>
</button>
</div>
</div>
</aside>
Modal with steps
Modal Documentation
Use
To make a modal activator add the class js-modal-activator to the button. Also add data-target attribute where the value is the ID of the modal to activate.
Ensure the model has a unique ID and the class js-modal.
Variations
To add a footer to the modal, include the block modal__footer after the modal__body.
To make a modal with steps, add the class js-modal--step as a modifier to the default modal and the class modal__step as a modifier to the class modal__body.
Modal sections should be limited to no more than four sections.