section#modals
  h2 Modals
  p Create a basic modal by using <code>modal</code> class and trigger it in JavaScript. All modal types are responsive (not demonstrated in this demo).

  .modal-sample

    .modal
      .modal-head.cf
        h3.modal-title This is a modal
        a(href='', class='modal-close') ×
      .modal-body
        p This is its body.
      .modal-footer
        button.button Okay

  :markdown
    ```html
      <div class='modal'>
        <div class='modal-head cf'>
          <h3 class='modal-title'>This is a modal</h3>
          <a href='' class='modal-close'>×</a>
        </div>
        <div class='modal-body'>
          <p>This is its body</p>
        </div>
        <div class='modal-footer'>
          <button class='button'>Okay</button>
        </div>
      </div>
    ```

  h3 Modals with no sectioning
  p For plain modal with no sectioning use <code>modal-no-sections</code> class and simplified markup.

  .modal-sample

    .modal.modal-no-sections
      p This is a simple modal.
      button.button Okay

  :markdown
    ```html
      <div class='modal modal-no-sections'>
        <p>This is a simple modal.</p>
        <button class='button'>Okay</button>
      </div>
    ```

  h3 Overlay
  p For semi-transparent overlay add <code>has-modal</code> class to the <code>body</code> element or a <code>div</code> with <code>overlay</code> class. Overlay appearance is pictured in modal examples above.