---
layout: cypress
title: Components/Modal
---

<div id="modal" class="modal">
  <div class="modal-background"></div>

  <div class="modal-content">
    <p class="image is-4by3">
      <img src="{{site.url}}/images/placeholders/1280x960.png" alt="">
    </p>
  </div>

  <button class="modal-close is-large" aria-label="close"></button>
</div>

<div id="modal-card" class="modal">
  <div class="modal-background"></div>

  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Modal title</p>
      <button class="delete" aria-label="close"></button>
    </header>

    <section class="modal-card-body">
      <!-- Content ... -->
    </section>

    <footer class="modal-card-foot">
      <button class="button is-success">Save changes</button>
      <button class="button">Cancel</button>
    </footer>
  </div>
</div>

<div id="modal-active" class="modal is-active">
  <div class="modal-background"></div>

  <div class="modal-content">
    <p class="image is-4by3">
      <img src="{{site.url}}/images/placeholders/1280x960.png" alt="">
    </p>
  </div>

  <button class="modal-close is-large" aria-label="close"></button>
</div>