We've updated our documenation to align with our other frameworks. Our new documenation will
live here and these pages will be removed.
Modals
Modals overlay pages to display secondary information. They come in default and fullscreen styles and can be customized with a header and footer.
Default modal
To create a modal start with <a href="#open-modal"> to trigger open the modal. Then create <div
id="open-modal" class="modal">. Inside, insert <div class="modal-container">. To close the modal, add <i
class="d-icon d-close"> wrapped within <a href="#close" class="close">. Lastly, insert <div class="modal-content"> to house model content.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<ahref="#open-modal">Open default modal</a><divid="open-modal"class="modal"><divclass="modal-container"><ahref="#close"class="close"><iclass="d-icon d-close"></i></a><divclass="modal-content"><h3>This is a modal</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div></div></div>
Fullscreen modal
Implement a fullscreen modal by adding the .is-full class after the .modal-container class.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<ahref="#open-modal">Open fullscreen modal</a><divid="open-modal"class="modal"><divclass="modal-container is-full"><ahref="#close"class="close"><iclass="d-icon d-close"></i></a><divclass="modal-content"><h3>This is a fullscreen modal</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p></div></div></div>
Modal header & footer
Add a header to a modal by inserting a <div class="modal-header"> before <div class="modal-content"> and wrapping header content within a <h3> tag. Add a footer by inserting a <div class="modal-footer"> after <div class="modal-content">. Wrap footer content within a <p> tag and add a style="margin:0px" attribute.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<ahref="#open-modal">Open modal with header and footer </a><divid="open-modal"class="modal"><divclass="modal-container"style="width:600px;"><ahref="#close"class="close"><iclass="d-icon d-close"></i></a><divclass="modal-header"><h3>This is a header</h3></div><divclass="modal-content"><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p></div><divclass="modal-footer"><pstyle="margin:0px;">This is a footer</p></div></div></div>
Active State
Added .is-active to the outter most element of a modal, will by default show the modal on page load.
This is an active modal
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<divclass="modal is-active"><divclass="modal-container"><ahref="#close"class="close"><iclass="d-icon d-close"></i></a><divclass="modal-content"><h3>This is an active modal</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div></div></div>
Variables
You can use these variables in a override.css file to customize this component.