Modal
Default Modal
A modal consists of three specific parts. First is the header where title and close button are located. Second is the body where all the main content is. And third is the modal footer containing our CTA buttons.
Modal Title
This is some text inside the default/medium modal body
<div class="modal-wrapper">
<div class="modal-overlay">
<div class="modal">
<!-- Modal Header -->
<div class="modal-header">
<h3 class="title">Modal Title</h3>
<button class="btn -plain" title="Close">
<svg class="icon-svg">
<use xlink:href="../assets/super-tight-icon-set/dist/stis-master.svg#icon-cross"></use>
</svg>
</button>
</div>
<!-- Modal Body -->
<div class="modal-body">
<p>This is some text inside the small modal body</p>
</div>
<!-- Modal Footer -->
<div class="modal-footer">
<button class="btn -primary">Action</button>
</div>
</div>
</div>
</div>
Notice:
Modal will automatically add a class .disable-scroll to the <body> so that if the modal's content is longer than the window's height, user can still scroll down through the rest of the modal.
Large Modal
Modal Title
This is some text inside the small modal body
<div class="modal-wrapper -large">...</div>