Fijn

Notification component: Default 

<div class="m-notification toast" role="alert" aria-live="assertive" data-autohide="false" aria-atomic="true" data-delay="5000">
    <div class="d-flex">
        <div class="a-circle -sm -hover -border -pointer position-absolute close cursor-default" data-dismiss="toast" aria-label="Close">
            <i class="icon-cross"></i>

        </div>

        <div class="toast-header flex-wrap border-bottom-0">
            <div class="d-flex p-3">

                <div class="a-circle -sm -hover bg-lightyellow -pointer cursor-default">
                    <i class="icon-warning"></i>

                </div>

                <div class="m-notification__text d-flex flex-column align-items-start ml-2 pt-1 pr-5">

                    <div class="text-break font-weight-bold d-flex flex-wrap cursor-pointer">Nieuwe taak toegevoegd aan takenlijst</div>
                    <p class="mb-0 pt-2 pr-3 w-100">Welstand ronde 3</p>

                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="m-notification toast" role="alert" aria-live="assertive"{% if autohide == false %} data-autohide="false"{% endif %} aria-atomic="true" data-delay="5000">
    <div class="d-flex">
        {% render '@circle', {size:"sm", icon:"cross", toast:true}, true %}
        <div class="toast-header flex-wrap border-bottom-0">
            <div class="d-flex p-3">
                {% if message == false %}
                    {% set pointer = false %}
                {% endif %}
                {% render '@circle', {color:circle_color, size:"sm", icon:icon, pointer:pointer}, true %}
                <div class="m-notification__text d-flex flex-column align-items-start ml-2 pt-1 pr-5">
                    {% if message %}
                        <div class="text-break font-weight-bold d-flex flex-wrap cursor-pointer">{{ title }}</div>
                        <p class="mb-0 pt-2 pr-3 w-100">{{message | safe }}</p>
                    {% else %}
                        <div class="text-break font-weight-bold d-flex flex-wrap">{{ title }}</div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
 
{
  "title": "Nieuwe taak toegevoegd aan takenlijst",
  "message": "Welstand ronde 3",
  "id": "toast1",
  "circle_color": "lightyellow",
  "icon": "warning",
  "autohide": false
}

Notification

Notifications are build by using the Bootstrap .toast component.

Trigger

Notification elements are triggered on certain events. At this moment the notification is only triggered on the task list whenever a task with subtasks is failed to complete.