Example

Show dialog

Trigger

<!-- Dialog trigger (button, link, etc...) -->
<!-- an attribute "data-dialog" must be specified -->
<!-- the "data-dialog" value is the ID of the dialog content to show when clicked -->
<button class="ui-btn" data-dialog="dialog-content-1">...</button>

Dialog

<!-- Dialog -->
<!-- the dialog is hidden by default, visibility is toggled using JS -->
<!-- the ID must match the ID specified in the "data-dialog" attribute -->
<div class="ui-dialog" id="dialog-content-1">

  <!-- overlay is a button (for accessibility) -->
  <button class="ui-dialog__overlay" tabindex="-1"></button>

  <div class="ui-dialog__body">
    <button class="ui-dialog__close"></button>
    <div class="ui-dialog__content">

      <!-- optional icon -->
      <div class="ui-dialog__icon">
        <i class="ui-icon ui-icon--duotone ui-icon--dashboard></i>
      </div>

      <h1 class="ui-dialog__title">...</h1>

      <!-- text content goes here -->
      <!-- you can use generic styling classes to adjust layout, ex: grid, margin/padding utility classes, etc... -->
      <p class="ui-dialog__text">...</p>

      <!-- cta, buttons, links go here -->
      <p class="ui-dialog__cta">
        <button class="ui-btn">...</button>
        <a class="ui-link ui-link--underline" href="#">...</a>
      </p>
    </div>
  </div>
</div>