Modals

Our modals usually appear when we need to get some sort of input from the user (like a name or a folder location), but they can also be used to grab attention to convey important messages or to provide supplemental information. Modals take up the whole screen and interrupt the user’s workflow, though, so they should be used judiciously.

Our modals contain:

• Dark gray overlay that obscures everything else on the screen
• Descriptive title
• Primary button (optional but encouraged)
• Secondary button (optional)
• Multiple escape options
• Top right close button
• "Cancel" link (optional but encouraged)

<div class="c-overlay is-open">
  <div class="c-modal l-modal">
    <div class="c-modal__heading">
      <div class="c-modalheading__title">Modal Title</div>
      <button class="c-modaltop__close o-button o-button--close">
        <i class="fa fa-times"></i>
      </button>
    </div>
    <div class="c-modal__content l-box l-box--column l-box--align-center">
      <p>Here's some info about what this modal does. Pretty cool.</p>
      <div class="c-modal__actions l-box l-box--center l-box--center-items">
        <button class="c-modal___button o-button o-button--primary">Action</button>
        <button class="o-button o-button--link">Cancel</button>
      </div>
    </div>
  </div>
</div>