Toasts

Toasts or growls usually appear in one of the corners of your page to draw your attention to something that has happened.

<div class="c-toasts c-toasts--topleft">
  <div class="c-toast">Default</div>
  <div class="c-toast c-toast--primary">Primary</div>
  <div class="c-toast c-toast--secondary">Secondary</div>
  <div class="c-toast c-toast--success">Success</div>
  <div class="c-toast c-toast--error">Error</div>
</div>

Positions

Toasts can appear in either of the corners of the page

.c-toasts--topleft

.c-toasts--topright

.c-toasts--bottomright

.c-toasts--bottomleft

Animation

.a-toasts

Apply the .a-toasts class to enable animation on all toasts within the block.

.a-toast

Will turn on animation per toast.

--slow, --fast

Every animation comes with slow and fast modifiers.