Toasts or growls are covered by special modifiers on Alerts and usually appear in one of the corners of your page to draw your attention to something that has happened.

Default
Brand
Info
Warning
Success
Error
<div class="c-alerts c-alerts--topleft">
  <div class="c-alert">Default</div>
  <div class="c-alert c-alert--brand">Brand</div>
  <div class="c-alert c-alert--info">Info</div>
  <div class="c-alert c-alert--warning">Warning</div>
  <div class="c-alert c-alert--success">Success</div>
  <div class="c-alert c-alert--error">Error</div>
</div> 

Positions

Toasts can appear in either of the corners of the page

.c-alerts--topleft

Default

.c-alerts--topright

Default

.c-alerts--bottomright

Default

.c-alerts--bottomleft

Default