Notification: Warning 

<div class="kx-notification kx-notification--warning 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">Warning Notification Title</h3>
        </header>
        <div class="kx-notification__body">
            <p>If needed (e.g. error message notifications), add extra information about the specific nature of a problem and a way to solve it.</p>
        </div>
    </div>
</div>
 
<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>
 
{
  "title": "Warning Notification Title",
  "content": "If needed (e.g. error message notifications), add extra information about the specific nature of a problem and a way to solve it.",
  "tone": "warning",
  "type": "block",
  "icon": {
    "symbol": null,
    "size": "moderate"
  },
  "dismissable": true,
  "classes": null
}

There are no notes for this item.