Style Guide - Modals

Modal Basics

Modal dialogs, or pop-up windows, are empty containers that can hold any kind of content including text, forms, buttons, videos, etc.

Modals consist of the following major sections:

Containing Element <div> with:
1. a unique ID id="xxx"
2. the .reveal class
3. the data-reveal attribute
Activation Source <a>,<div>, etc. with:
1. the data-open attribute equal to ID of modal

<!-- Containing Element -->
<div class="reveal" id="exampleModal" data-reveal>
    ...
</div>

<!-- Acitvation Button -->
<button class="button" data-open="exampleModal">Open Modal</button>

<!-- Acitvation Link -->
<a class="secondary-link" data-open="exampleModal">Open Modal Link</a>

Open Modal Link

Example Modal

Use the .close-button class and data-close attribute on a button element to create a quick "X" button in the section header.

You can put any kind of data or information in a modal just like a normal page!

Secondary Button

Primary Button