Alert Dialog CSS Component

An alert dialog is a specific type of lightbox-dialog that must be explicitly acknowledged in order to dimiss.

The markup requirements are very strictly: a heading, description and button.

<button
  class="btn btn--primary dialog-button"
  data-makeup-for="alert-dialog-0"
  type="button"
>
  Open Alert Dialog
</button>
<div
  aria-labelledby="alert-dialog-title"
  aria-modal="true"
  class="alert-dialog alert-dialog--mask-fade"
  hidden
  id="alert-dialog-0"
  role="alertdialog"
>
  <div class="alert-dialog__window alert-dialog__window--animate">
    <div class="alert-dialog__header">
      <h2 id="alert-dialog-title" class="alert-dialog__title">Alert!</h2>
    </div>
    <div class="alert-dialog__main">
      <p id="alert-description-0">
        You must acknowledge this alert to continue.
      </p>
    </div>
    <div class="alert-dialog__footer">
      <button
        class="btn btn--primary alert-dialog__acknowledge"
        aria-describedby="alert-description-0"
      >
        OK
      </button>
    </div>
  </div>
</div>
Accordion ComponentAvatar Component