Overlay

How to use 
<button class="ar-btn" data-ar-open="my-modal">Open</button>

<dialog id="my-modal" class="ar-modal" data-ar-backdrop-close>
  <div class="ar-modal-box">Modal content</div>
</dialog>

Close buttons: data-ar-close · drawer: ar-drawer-toggle checkbox + opener data-ar-drawer-toggle="id" · carousel: ar-carousel / ar-carousel-item with prev/next via data-ar-carousel-prev / data-ar-carousel-next

Modal

Modal title

Content inside the modal box. Close via the button, backdrop, or Esc.

Drawer (checkbox / JS toggle)

Drawer pushes from the left. Works with the checkbox input, or the data-ar-drawer-toggle button.

Carousel