Notification

HTML

<div class="kx-notification kx-notification--neutral kx-notification--block kx-flex kx-align-items-start kx-justify-content-start">
    <div class="kx-notification__content kx-flex kx-flex-wrap kx-align-items-start">
        <!-- BUTTON Component -->
        <button class="kx-btn kx-btn--size-base kx-btn--icon kx-notification__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>
        <header class="kx-notification__header">
            <h3 class="kx-notification__title">Neutral Notification Title</h3>
        </header>
        <div class="kx-notification__body">
            <p>Users want to stay informed while using your web or mobile applications. Always use the opportunity to show your users well-formed and clear notifications.</p>
        </div>
    </div>
</div>

View

<div class="kx-notification{% if tone %} kx-notification--{{ tone }}{% endif %}{% if type %} kx-notification--{{ type }}{% endif %} kx-flex kx-align-items-start kx-justify-content-start{% for class in classes %} {{ class }}{% endfor %}">
    <div class="kx-notification__content kx-flex kx-flex-wrap kx-align-items-start">
        {%if dismissable -%}
            {% render '@button', { text: 'Close', size: 'base', hideText: true, icon: { symbol: 'close', size: 'moderate' }, classes: [ 'kx-notification__close' ] } %}
        {% endif -%}
        {% if title -%}
        <header class="kx-notification__header">
            <h3 class="kx-notification__title">{{ title }}</h3>
        </header>
        {% endif -%}
        {% if content -%}
        <div class="kx-notification__body">
            <p>{{ content }}</p>
        </div>
        {% endif -%}
    </div>
</div>