CMS Modal

<div x-data="{ modalOpen : false }">
    <!-- Trigger -->
    <div class="o-wrapper">
        <div>
            <button class="c-btn" @click="modalOpen = true" type="button">Open Box</button>
        </div>
    </div>

    <!-- Modal -->
    <div class="c-modal c-modal--box" role="dialog" aria-modal="true" style="display: none" 
        x-show="modalOpen"
        x-id="['modal-title']"
        x-on:keydown.escape.prevent.stop="modalOpen = false"
        :aria-labelledby="$id('modal-title')"
    >
        <div class="c-modal__overlay"
             x-show="modalOpen"
             x-transition.opacity 
             @click="modalOpen = false"
        ></div>

        <div class="c-modal__body"
             x-show="modalOpen"
             x-transition.duration.300
             x-on:click.stop
             x-trap.noscroll.inert="modalOpen"
            >
            <div class="c-modal__body-header | o-flow">
                <h2 class="u-heading u-delta">Page Parts</h2>
            </div>
            <div class="c-modal__body-content | u-h-20 | o-flow">
                <div class="o-grid">
                    <div class="o-grid__item | u-col-12">
                        <h3 class="u-heading u-epsilon">Content Layouts</h3>
                    </div>
                    <div class="o-grid__item | u-col-6" id="content_box">
                        <button class="c-card" x-data="{ selected: false }" @click="selected = ! selected" :class="selected ? 'is-selected' : ''">
                            <div class="c-card__thumb">
                                <img class="c-img c-card__thumb-img" src="/assets/img/ds/content/thumbs/focus.svg" width="480" height="268" alt>
                            </div>
                            <div class="c-card__footer">
                                <h4 class="u-fw-500 u-size-sm">Content Box</h4>
                            </div>
                        </button>
                    </div>
                    <div class="o-grid__item | u-col-6" id="content_columns">
                        <button class="c-card" x-data="{ selected: false }" @click="selected = ! selected" :class="selected ? 'is-selected' : ''">
                            <div class="c-card__thumb">
                                <img class="c-img c-card__thumb-img" src="/assets/img/ds/content/thumbs/text-cols.svg" width="480" height="268" alt>
                            </div>
                            <div class="c-card__footer">
                                <h4 class="u-fw-500 u-size-sm">Content Columns</h4>
                            </div>
                        </button> 
                    </div>
                    <div class="o-grid__item | u-col-6">
                        <button class="c-card" x-data="{ selected: false }" @click="selected = ! selected" :class="selected ? 'is-selected' : ''">
                            <div class="c-card__thumb">
                                <img class="c-img c-card__thumb-img" src="/assets/img/ds/content/thumbs/featured.svg" width="480" height="268" alt>
                            </div>
                            <div class="c-card__footer">
                                <h4 class="u-fw-500 u-size-sm">Content & Images</h4>
                            </div>
                        </button> 
                    </div>
                    <div class="o-grid__item | u-col-12 u-mt-md">
                        <h3 class="u-heading u-epsilon">Image Layouts</h3>
                    </div>
                    <div class="o-grid__item | u-col-6">
                        <button class="c-card" x-data="{ selected: false }" @click="selected = ! selected" :class="selected ? 'is-selected' : ''">
                            <div class="c-card__thumb">
                                <img class="c-img c-card__thumb-img" src="/assets/img/ds/content/thumbs/panoramic.svg" width="480" height="268" alt>
                            </div>
                            <div class="c-card__footer">
                                <h4 class="u-fw-500 u-size-sm">Panoramic Image</h4>
                            </div>
                        </button> 
                    </div>
                    <div class="o-grid__item | u-col-6">
                        <button class="c-card" x-data="{ selected: false }" @click="selected = ! selected" :class="selected ? 'is-selected' : ''">
                            <div class="c-card__thumb">
                                <img class="c-img c-card__thumb-img" src="/assets/img/ds/content/thumbs/image-grid.svg" width="480" height="268" alt>
                            </div>
                            <div class="c-card__footer">
                                <h4 class="u-fw-500 u-size-sm">Image Grid</h4>
                            </div>
                        </button> 
                    </div>
                    <div class="o-grid__item | u-col-6">
                        <button class="c-card" x-data="{ selected: false }" @click="selected = ! selected" :class="selected ? 'is-selected' : ''">
                            <div class="c-card__thumb">
                                <img class="c-img c-card__thumb-img" src="/assets/img/ds/content/thumbs/image-gallery.svg" width="480" height="268" alt>
                            </div>
                            <div class="c-card__footer">
                                <h4 class="u-fw-500 u-size-sm">Image Gallery</h4>
                            </div>
                        </button> 
                    </div>
                    <div class="o-grid__item | u-col-12 u-mt-md">
                        <h3 class="u-heading u-epsilon">Marketing Layouts</h3>
                    </div>
                    <div class="o-grid__item | u-col-6">
                        <button class="c-card" x-data="{ selected: false }" @click="selected = ! selected" :class="selected ? 'is-selected' : ''">
                            <div class="c-card__thumb">
                                <img class="c-img c-card__thumb-img" src="/assets/img/ds/content/thumbs/subscribe.svg" width="480" height="268" alt>
                            </div>
                            <div class="c-card__footer">
                                <h4 class="u-fw-500 u-size-sm">Email Subscription</h4>
                            </div>
                        </button> 
                    </div>
                    <div class="o-grid__item | u-col-6">
                        <button class="c-card" x-data="{ selected: false }" @click="selected = ! selected" :class="selected ? 'is-selected' : ''">
                            <div class="c-card__thumb">
                                <img class="c-img c-card__thumb-img" src="/assets/img/ds/content/thumbs/finance-tables.svg" width="480" height="268" alt>
                            </div>
                            <div class="c-card__footer">
                                <h4 class="u-fw-500 u-size-sm">Finance Tables</h4>
                            </div>
                        </button> 
                    </div>
                </div>
            </div>
            <div class="c-modal__body-footer">
                <button class="c-btn c-btn--positive" type="button" @click="modalOpen = false">Add Selected</button>
            </div>
        </div>
    </div>
</div>