D.School Component Library

Notification: Default 

<span class="o-notification">
        <span class="o-notification__icon"><svg width="25" height="25" viewBox="0 0 25 25" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                <path d="M12.5 23C18.3 23 23 18.3 23 12.5C23 6.7 18.3 2 12.5 2C6.7 2 2 6.7 2 12.5C2 18.3 6.7 23 12.5 23ZM12.5 18.7C11.67 18.7 11 18.03 11 17.2C11 16.37 11.67 15.7 12.5 15.7C13.33 15.7 14 16.37 14 17.2C14 18.03 13.33 18.7 12.5 18.7ZM11.5 6.25H13.5L14.24 7.11L13.24 13.86H11.76L10.76 7.11L11.5 6.25Z" />
            </svg>
        </span>
        This is an error message.
    </span>
 
{% if notification.text %}
  {% set base_class = notification.base_class|default('o-notification') %}
  <span class="{{ bem(base_class, notification.element, notification.modifiers, notification.extra) }}">
    {% if notification.modifiers is defined and 'success' in notification.modifiers %}
      <span class="o-notification__icon">{% include '@icon-success' %}</span>
    {% else %}
      <span class="o-notification__icon">{% include '@icon-warning' %}</span>
    {% endif %}
    {{ notification.text }}
  </span>
{% endif %}
 
{
  "notification": {
    "text": "This is an error message."
  }
}

No notes defined.