Modal

HTML

<div class="kx-modal" tabindex="-1" role="dialog" aria-labelledby="--52885">
    <div class="kx-modal__dialog" role="document">
        <div class="kx-modal__content">
            <!-- BUTTON Component -->
            <button class="kx-btn kx-btn--size-base kx-btn--icon kx-modal__close" aria-label="Close">
    <span class="kx-btn__inner">
        <i class="kx-icon kx-icon--size-moderate">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#close"></use>
        </svg>
    </i>
        <span class="kx-btn__txt kx-is-vishidden">Close</span>
    </span>
</button>
            <div class="kx-modal__header">
                <div class="kx-modal__title" id="--52885">Default</div>
            </div>
            <div class="kx-modal__body">
                Modals are used to display content in a layer above the app and allows the user to perform tasks within the current context.
            </div>

            <div class="kx-modal__footer">
                <!-- BUTTON-GROUP Component -->
                <div class="kx-btngroup kx-flex kx-flex-wrap kx-btngroup--spacing  kx-justify-content-right " role="group" aria-label="">
                    <!-- BUTTON Component -->
                    <button class="kx-btn kx-btn--skin-secondary kx-btn--size-base">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Cancel</span>
    </span>
</button>
                    <!-- BUTTON Component -->
                    <button class="kx-btn kx-btn--skin-primary kx-btn--size-base">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Save changes</span>
    </span>
</button>
                </div>
            </div>

        </div>
    </div>
    <div class="kx-modal__backdrop"></div>
</div>

View

{% if id %}
    {% set random_number = range(0, 100000) | random %}
    {% set id = id | replace(' ', '-') | lower + '--' + random_number %}
{% else %}
    {% set random_number = range(0, 100000) | random %}
    {% set id = label | replace(' ', '-') | lower + '--' + random_number %}
{% endif %}

<div class="kx-modal" tabindex="-1"{% if alert %} role="alertdialog"{% else %} role="dialog"{% endif %} aria-labelledby="{{ id }}">
    <div class="kx-modal__dialog{% if skin %} kx-modal--skin-{{ skin }}{% endif %}{% if size %} kx-modal--size-{{ size }}{% endif %}" role="document">
        <div class="kx-modal__content">
            {% render '@button', { text: 'Close', size: 'base', hideText: true, icon: { symbol: 'close', size: 'moderate' }, classes: [ 'kx-modal__close' ] } %}
            <div class="kx-modal__header">
                {% if title %}<div class="kx-modal__title" id="{{ id }}">{{ title }}</div>{% endif %}
            </div>
            <div class="kx-modal__body">
                {{ content }}
            </div>
            {% if cta %}
            <div class="kx-modal__footer">
                {% render '@button-group', cta %}
            </div>
            {% endif %}
        </div>
    </div>
    <div class="kx-modal__backdrop"></div>
</div>