Toasts

The framework comes with a few basic 'toast' styles add this dynamically to the end of your markup.

<div class="toasts">
   <toast time="3000">
      <div class="col v-a">
         <i data-feather="x" class="toast-danger br-full p icon "></i>
         <div class="m-l v-a ">The file was deleted</div>
      </div>
   </toast>
   <toast time="4000">
      <div class="row">
         <div class="col v-a">
            <i data-feather="check" class="toast-success  br-full  p icon "></i>
            <div class="m-l v-a ">Congratulations you may proceed as normal to the next screen</div>
         </div>
      </div>
   </toast>
</div>
The file was deleted
Congratulations you may proceed as normal to the next screen

Note this requires javascript (Vuejs 2.0)