Modals

Use the modal to display content in an overlay. Modals are hidden by default. To show them, add the .js-show-modal class to the body element with Javascript.

Open modal
<div class="modal">
  <div class="modal__content xs-mt0 sm-mt6 xs-col-12 sm-col-9 md-col-7 lg-col-5">
    <a class="modal__close js-hide-modal" href="javascript:">
      <svg viewBox="0 0 38 38" class="modal__close-icon" xmlns="http://www.w3.org/2000/svg">
        <title>Close</title>
          <path d="M30.3 10.5l-2.8-2.8-8.5 8.5-8.5-8.5-2.8 2.8 8.5 8.5-8.5 8.5 2.8 2.8 8.5-8.5 8.5 8.5 2.8-2.8-8.5-8.5z"/>
      </svg>
    </a>

      <h2 class="xs-text-2 bold">Modal title</h2>
      <p class="xs-mb2">This is my modal text. It's really good text, have you seen it?</p>

      <form class="xs-mb4">
        <label class="form-label">Form 1</label>
        <input type="text" class="text-input xs-col-12 xs-mb2">
        <label class="form-label">Form 2</label>
        <input type="text" class="text-input xs-col-12">
      </form>

      <div class="clearfix xs-text-right">
        <button class="button button--secondary xs-block xs-col-12 sm-inline-block sm-width-auto xs-mb1 sm-mb0 xs-mr0 sm-mr1 js-hide-modal">Cancel</button>
        <button class="button xs-block xs-col-12 sm-inline-block sm-width-auto">Save</button>
      </div>
  </div>
</div>