D.School Component Library

Notification: Success 

<span class="o-notification o-notification--success">
        <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 2C6.7 2 2 6.7 2 12.5C2 18.3 6.7 23 12.5 23C18.3 23 23 18.3 23 12.5C23 6.7 18.3 2 12.5 2ZM11.75 16.69H10.71L6.48 12.68L7.51 11.59L11.22 15.11L17.47 9.05L18.51 10.13L11.74 16.69H11.75Z" />
            </svg>
        </span>
        This is a success 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 a success message.",
    "modifiers": [
      "success"
    ]
  }
}

No notes defined.