Use modals to display content that is not substantial enough to warrant its own page or navigation item. For example, you might use a modal for a newsletter signup, as shown in the example below.
Modals are most often calls to action to fill out a form, etc. As such, a button should be used as the link to open a modal, as in the example above.
data-open attribute should be applied to the button link and the value of that attribute should match the id of the div to be opened.
<div> <a data-open="example-modal" class="button full-width"> <div class="valign"> <div class="button-label valign-cell">View an example modal</div> </div> </a> </div> <div id="example-modal" class="reveal center" data-reveal> <i class="far fa-envelope fa-5x electric-blue" aria-hidden="true"></i> <p class="h2">Sign up for updates</p> <p>Sign up for updates to stay informed and get involved with events.</p> <button class="close-button bg-white" data-close aria-label="Close modal" type="button"><span aria-hidden="true">×</span></button> </div>