Fijn

Notification component: Button 

<div id="toast1" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-delay="5000">
    <button type="button" class="position-absolute close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
    <div class="toast-header flex-wrap">
        <div class="d-flex align-items-center p-3">
            <div class="a-circle -sm -hover bg-lightyellow -pointer cursor-default">
                <i class="icon-warning"></i>

            </div>

            <div class="ml-3 pr-3">
                <strong>Nieuwe taak toegevoegd aan takenlijst</strong>
            </div>
        </div>
        <p class="mb-0 pt-0 pr-3 pb-3 pl-3 text-muted w-100">Welstand ronde 3</p>
    </div>
    <div class="toast-body d-flex justify-content-end pt-3 pr-3 pb-3 pl-4">
        <button type="button" class="btn btn-warning btn-sm -iconRight">

            Button

        </button>
    </div>
</div>
 
<div id="{{id}}" class="toast" role="alert" aria-live="assertive" {% if autohide %}data-autohide="false"{% endif %} aria-atomic="true" data-delay="5000">
    <button type="button" class="position-absolute close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
    <div class="toast-header flex-wrap">
        <div class="d-flex align-items-center p-3">
            {% render '@circle', {color:circle_color, size:"sm", icon:icon}, true %}
            <div class="ml-3 pr-3">
                <strong>{{title}}</strong>
            </div>
        </div>
        <p class="mb-0 pt-0 pr-3 pb-3 pl-3 text-muted w-100">{{message}}</p>
    </div>
    <div class="toast-body d-flex justify-content-end pt-3 pr-3 pb-3 pl-4">
        {% render '@button', {small:true, text:button_text, color:"warning", disabled:disabled, full_width:full_width}, true %}
    </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.