Example

<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>

Live demo

Show Notice
<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>

Show on Startup

Will be visible when the page loads
<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>

Messenger

Amber Smith

2 days ago
  • The last album.
  • I can’t open the last album!
10:19
  • Gues, I can’t open the last album...
10:20
Today
  • 123
10:29
  • Haha Amber! You are so nice! :smile:
10:30