Modal
Examples
Modals are wrapped in .modal-background and then the modal itself has .modal. There is also always a .card-close inside the modal. You'll need to specific the padding on each modal. We have three sizes. None of the js- classes are necessary on our React apps.
<button class="btn btn--default js-default-modal-show">Default Modal</button>
<button class="btn btn--default js-large-modal-show">Large Modal</button>
<button class="btn btn--default js-huge-modal-show">Huge Modal</button>
<!-- Default modal -->
<div class="modal-background js-default-modal" style="display: none;">
<div class="modal p2">
<div class="card-close js-modal-close"><i class="i i-cross-with-circle"></i></div>
<h3>Default Modal</h3>
<p>Here's the content.</p>
<div class="clearfix">
<button class="btn btn--default float-right ml1 js-modal-close">Save</button>
<button class="btn btn--outline float-right js-modal-close">Close</button>
</div>
</div>
</div>
<!-- Large modal -->
<div class="modal-background js-large-modal" style="display: none;">
<div class="modal modal--lg p2">
<div class="card-close js-modal-close"><i class="i i-cross-with-circle"></i></div>
<h3>Large Modal</h3>
<p>Here's the content.</p>
<div class="clearfix">
<button class="btn btn--default float-right ml1 js-modal-close">Save</button>
<button class="btn btn--outline float-right js-modal-close">Close</button>
</div>
</div>
</div>
<!-- Huge modal -->
<div class="modal-background js-huge-modal" style="display: none;">
<div class="modal modal--huge p2">
<div class="card-close js-modal-close"><i class="i i-cross-with-circle"></i></div>
<h3>Huge Modal</h3>
<p>Here's the content.</p>
<div class="clearfix">
<button class="btn btn--default float-right ml1 js-modal-close">Save</button>
<button class="btn btn--outline float-right js-modal-close">Close</button>
</div>
</div>
</div>
