Dialog

Displays overlay content such as forms, messages, or confirmations.

Structure

A dialog consists of:

• dialog: Container
  • dialog-content: Dialog content container
    • dialog-card: Card container, you can use card classes. More info here
      • dialog-header: Dialog header, where the title and close button go
      • dialog-body: Dialog content
      • dialog-footer: Dialog action area, you can add buttons

Basic Usage

By default, the dialog is aligned to the top.

info

To display the dialog, the is-active class must be used.

Título del dialog

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut eveniet nemo possimus debitis quae?

<div class="dialog is-active">
  <div class="dialog-overlay">
    <div class="dialog-card">
      <!--  Dialog Header  -->
      <header class="dialog-header">
        <div class="dialog-title">Título del dialog</div>
        <button class="btn is-close">
          <iconify-icon class="icon" icon="mdi:close"></iconify-icon>
        </button>
      </header>

      <!--  Dialog Body  -->
      <section class="dialog-body">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut eveniet nemo
        possimus debitis quae?
      </section>

      <!--  Dialog Footer  -->
      <footer class="dialog-footer">
        <button class="btn is-outlined">Cancelar</button>
        <button class="btn">Guardar</button>
      </footer>
    </div>
  </div>
</div>

Centered

To center the dialog on the screen, use the dialog-centered class along with the dialog class.

Preview

Título del dialog

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut eveniet nemo possimus debitis quae?

Code

<div class="dialog dialog-centered is-active">
  <div class="dialog-overlay">
    <div class="dialog-card">
      <!--  Dialog Header  -->
      <header class="dialog-header">
        <div class="dialog-title">Título del dialog</div>
        <button class="btn is-close">
          <iconify-icon class="icon" icon="mdi:close"></iconify-icon>
        </button>
      </header>

      <!--  Dialog Body  -->
      <section class="dialog-body">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut eveniet nemo
        possimus debitis quae?
      </section>

      <!--  Dialog Footer  -->
      <footer class="dialog-footer">
        <button class="btn is-outlined">Cancelar</button>
        <button class="btn">Guardar</button>
      </footer>
    </div>
  </div>
</div>

Scrollable Body

To make the body of a dialog scrollable, use the dialog-scrollable class along with the dialog class.

Preview

Título del dialog

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec dicuntur inconstantissime. At coluit ipse amicitias. Memini me adesse P. Id est enim, de quo quaerimus.

Quae sequuntur igitur? Sed quid sentiat, non videtis. Idemne potest esse dies saepius, qui semel fuit? Memini vero, inquam;

Sit hoc ultimum bonorum, quod nunc a me defenditur; Bork Cur haec eadem Democritus? Huius, Lyco, oratione locuples, rebus ipsis ielunior.

Tecum optime, deinde etiam cum mediocri amico. Multoque hoc melius nos veriusque quam Stoici. Maximus dolor, inquit, brevis est. Quae hic rei publicae vulnera inponebat, eadem ille sanabat. Satis est ad hoc responsum. Respondeat totidem verbis. Quo modo autem philosophus loquitur? Quare attende, quaeso.

Duo Reges: constructio interrete. Memini vero, inquam; Sed ea mala virtuti magnitudine obruebantur. Diodorus, eius auditor, adiungit ad honestatem vacuitatem doloris. Que Manilium, ab iisque M. Summus dolor plures dies manere non potest?

Code

<div class="dialog dialog-scrollable is-active">
  <div class="dialog-overlay">
    <div class="dialog-card">
      <!--  Dialog Header  -->
      <header class="dialog-header">
        <div class="dialog-title">Título del dialog</div>
        <button class="btn is-close">
          <iconify-icon class="icon" icon="mdi:close"></iconify-icon>
        </button>
      </header>

      <!--  Dialog Body  -->
      <section class="dialog-body">
        <div>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec
            dicuntur inconstantissime. At coluit ipse amicitias. Memini me
            adesse P. Id est enim, de quo quaerimus.
          </p>
          <p>
            Quae sequuntur igitur? Sed quid sentiat, non videtis. Idemne potest
            esse dies saepius, qui semel fuit? Memini vero, inquam;
          </p>
          <p>
            Sit hoc ultimum bonorum, quod nunc a me defenditur; Bork Cur haec
            eadem Democritus? Huius, Lyco, oratione locuples, rebus ipsis
            ielunior.
          </p>
          <p>
            Tecum optime, deinde etiam cum mediocri amico. Multoque hoc melius
            nos veriusque quam Stoici. Maximus dolor, inquit, brevis est. Quae
            hic rei publicae vulnera inponebat, eadem ille sanabat. Satis est ad
            hoc responsum. Respondeat totidem verbis. Quo modo autem philosophus
            loquitur? Quare attende, quaeso.
          </p>
          <p>
            Duo Reges: constructio interrete. Memini vero, inquam; Sed ea mala
            virtuti magnitudine obruebantur. Diodorus, eius auditor, adiungit ad
            honestatem vacuitatem doloris. Que Manilium, ab iisque M. Summus
            dolor plures dies manere non potest?
          </p>
        </div>
      </section>

      <!--  Dialog Footer  -->
      <footer class="dialog-footer">
        <button class="btn is-outlined">Cancelar</button>
        <button class="btn">Guardar</button>
      </footer>
    </div>
  </div>
</div>

Card Classes

You can use all the classes of the card component in the dialog-card, for example:

• is-outlined: To have no elevation and only a border.
• elevation-{number}: To give an elevation effect.

info

For more information, visit the card component documentation.

Outlined

Preview

Título del dialog

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut eveniet nemo possimus debitis quae?

Code

<div class="dialog is-active">
  <div class="dialog-overlay">
    <div class="dialog-card is-outlined">
      <!--  Dialog Header  -->
      <header class="dialog-header">
        <div class="dialog-title">Título del dialog</div>
        <button class="btn is-close">
          <iconify-icon class="icon" icon="mdi:close"></iconify-icon>
        </button>
      </header>

      <!--  Dialog Body  -->
      <section class="dialog-body">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut eveniet nemo
        possimus debitis quae?
      </section>

      <!--  Dialog Footer  -->
      <footer class="dialog-footer">
        <button class="btn is-outlined">Cancelar</button>
        <button class="btn">Guardar</button>
      </footer>
    </div>
  </div>
</div>

Image

Preview

Título del dialog

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut eveniet nemo possimus debitis quae?

Code

<div class="dialog is-active">
  <div class="dialog-overlay">
    <div class="dialog-card">
      <!--  Dialog Image  -->
      <figure class="image is-16by9">
        <img src="/pucoui/img/pucoui-img-1-lg.jpeg" />
      </figure>

      <!--  Dialog Header  -->
      <header class="dialog-header">
        <div class="dialog-title">Título del dialog</div>
        <button class="btn is-close">
          <iconify-icon class="icon" icon="mdi:close"></iconify-icon>
        </button>
      </header>

      <!--  Dialog Body  -->
      <section class="dialog-body">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut eveniet nemo
        possimus debitis quae?
      </section>

      <!--  Dialog Footer  -->
      <footer class="dialog-footer">
        <button class="btn is-outlined">Cancelar</button>
        <button class="btn">Guardar</button>
      </footer>
    </div>
  </div>
</div>