Fijn

Notification wrap component: Default 

<div class="o-notifications position-fixed -active" aria-live="polite" aria-atomic="true">
    <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-orange cursor-default">
                        <i class="icon-config"></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">Offerte_Parkwijk1.pdf geupload</div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <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-cyaan cursor-default">
                        <i class="icon-upload"></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">Offerte_Parkwijk1.pdf geupload</div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <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 -download -sm -hover bg-purple cursor-default">
                        <i class="icon-download-alt"></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">Offerte_Parkwijk1.pdf gedownload</div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="m-notification toast" role="alert" aria-live="assertive" 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-pistache cursor-default">
                        <i class="icon-sync"></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">Westandsset_Parkwijk.pdf gegenereerd</div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="o-notifications position-fixed{% if trigger == false %} -active{% endif %}" aria-live="polite" aria-atomic="true">
    {% render '@notification', {circle_color:"orange", title:"Offerte_Parkwijk1.pdf geupload", message:false, icon:"config"}, true %}
    {% render '@notification', {circle_color:"cyaan", title:"Offerte_Parkwijk1.pdf geupload", message:false, icon:"upload"}, true %}
    {% render '@notification', {circle_color:"purple", title:"Offerte_Parkwijk1.pdf gedownload", message:false, icon:"download-alt"}, true %}
    {% render '@notification', {autohide:true, circle_color:"pistache", title:"Westandsset_Parkwijk.pdf gegenereerd", message:false, icon:"sync"}, true %}
</div>
 
{
  "trigger": false
}

No notes defined.