<button data-target="testing-dialog">Launch modal</button>

<dialog id="testing-dialog">
    <section>
        <header>
            <h4>Dialog title</h4>
            <button type="button" data-close class="close" aria-label="Close modal"></button>
        </header>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam qui mollitia
            itaque
            et temporibus magnam hic id, optio earum cumque!</p>
        <footer>
            <button class="secondary" data-close>Cancel</button>
            <button type="submit">Confirm</button>
        </footer>
    </section>
</dialog>

<button data-target="testing-dialog-wide-1">Launch modal</button>

<dialog id="testing-dialog-wide-1">
    <section class="width-s">
        <header>
            <h4>Dialog title (small)</h4>
            <button type="button" data-close class="close" aria-label="Close modal"></button>
        </header>
        <p>This modal has <code>class="width-s"</code>.</p>
        <footer>
            <button class="secondary" data-close>Cancel</button>
            <button>Confirm</button>
        </footer>
    </section>
</dialog>

<button data-target="cookie-modal" aria-controls="cookie-modal" aria-haspopup="dialog">Launch modal</button>

<dialog id="cookie-modal" data-locked="true">
    <section>
        <h2>Cookie Settings</h2>
        <p>This modal has <code>data-locked="true"</code> and cannot be closed by
            clicking
            the background.</p>
        <footer>
            <button data-close>Accept</button>
        </footer>
    </section>
</dialog>