Modals provide an interruptive dialog that forces a user to take action. They’re best used when you need to ask the user a question, or present them with a short bit of information. If the modal content is too large, it can begin to grow beyond the bounds of the screen and provides a bad user experience.

If you’re looking for a similar type of container that’s inline and not as interruptive, take a look at panels.

Example Usage:

Code Example:

        <div class="modal-mask">
            <div class="modal">
                <div class="modal-head">
                    <p class="modal-title">Modal Example</p>
                <div class="modal-body">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto culpa expedita totam aperiam, aliquid, consectetur!</p>
                <div class="modal-footer">
                    <button class="button-primary">Save</button>
Up Next: »