Modals
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:
Modal Example
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto culpa expedita totam aperiam, aliquid, consectetur!
Code Example:
<div class="modal-mask">
<div class="modal">
<div class="modal-head">
<p class="modal-title">Modal Example</p>
</div>
<div class="modal-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto culpa expedita totam aperiam, aliquid, consectetur!</p>
</div>
<div class="modal-footer">
<button class="button-primary">Save</button>
</div>
</div>
</div>