Dialogs

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

<dialog>
  ...
  <a class="control close"><svg>...</svg></a>
</dialog>

<dialog>
  ...
  <a class="control close"><svg>...</svg></a>
  <footer>
    <button class="primary">...</button>
    <button>...</button>
  </footer>
</dialog>

Width

<dialog class="small"></dialog>
<dialog class="medium"></dialog>
<dialog class="wide"></dialog>
<dialog class="full-width"></dialog>

In action

To see a dialog box in action, please press below button: