Toast notification

It will show to upper right corner by default. But you may choose bottom, left, top positions. Sample code -

<aside class="toast-notification bottom">
    <div class="message"><button class="message-close center">✖</button> Sucessfully updated! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo cupiditate doloribus eum atque iure architecto illum repellendus iste. Voluptate ab ipsa numquam odit ea, debitis ex quas fugiat vel quae!</div>
    <div class="message message-primary"><button class="message-close center">✖</button> Another notification</div>
</aside>

See it in action

You may write your own JavaScript snippets to get it work!

SASS

Reference from _toast-notification.scss

$toast-notification-width: rem(400) !default;