Fijn

Notification wrap component: Message 

<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-turquoise -pointer cursor-default">
                        <i class="icon-rocket"></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">Parkwijk Lelystad</div>
                        <p class="mb-0 pt-2 pr-3 w-100"><span class='text-muted'>Je bent toegevoegd aan een nieuw project:</span> <u>Parkwijk Lelystad</u></p>

                    </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-pink -pointer cursor-default">
                        <i class="icon-calendar"></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">De Vliethorst</div>
                        <p class="mb-0 pt-2 pr-3 w-100"><span class='text-muted'>De deadline van de taak</span> <u>Controle voorontwerp</u><span class='text-muted'> is vandaag</span></p>

                    </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:"turquoise", title:"Parkwijk Lelystad", message:"<span class='text-muted'>Je bent toegevoegd aan een nieuw project:</span> <u>Parkwijk Lelystad</u>", icon:"rocket"}, true %}
    {% render '@notification', {circle_color:"pink", title:"De Vliethorst", message:"<span class='text-muted'>De deadline van de taak</span> <u>Controle voorontwerp</u><span class='text-muted'> is vandaag</span>", icon:"calendar"}, true %}
</div>
 
{
  "trigger": false
}

No notes defined.