Toasts

<div class="toast op-10" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
        <h5 class="mr-auto mnb-2">RootUI</h5>
        <small class="toast-date">15 minutes ago</small>
        <button type="button" class="ml-15 mnt-5 mnr-4 toast-close close" data-dismiss="toast" aria-label="Close">
            <span data-feather="x" class="rui-icon rui-icon-stroke-1_5"></span>
        </button>
    </div>
    <div class="toast-body">
        Hey, this is a demo notice.
    </div>
</div>

<a href="#my-toast" class="btn btn-danger rui-toast-show">Show Notice</a>
<div class="toast rui-toast hide" id="my-toast" role="alert" aria-live="assertive" aria-atomic="true" data-delay="8000">
    <div class="toast-header">
        <h5 class="mr-auto mnb-2">RootUI</h5>
        <small class="toast-date">15 minutes ago</small>
        <button type="button" class="ml-15 mnt-4 mnr-4 toast-close close" data-dismiss="toast" aria-label="Close">
            <span data-feather="x" class="rui-icon rui-icon-stroke-1_5"></span>
        </button>
    </div>
    <div class="toast-body">
        Hey, this is a demo notice.
    </div>
</div>

<div class="toast rui-toast" role="alert" aria-live="assertive" aria-atomic="true" data-delay="8000" data-toast-show-on-startup="true">
    <div class="toast-header">
        <h5 class="mr-auto mnb-2">RootUI</h5>
        <small class="toast-date">15 minutes ago</small>
        <button type="button" class="ml-15 mnt-4 mnr-4 toast-close close" data-dismiss="toast" aria-label="Close">
            <span data-feather="x" class="rui-icon rui-icon-stroke-1_5"></span>
        </button>
    </div>
    <div class="toast-body">
        Hey, this is a demo notice. Click on the close button if you don't want to see it again.
    </div>
</div>