Document positioning of a Toast

Author: simurai

pages/css/components/toasts.md

@@ -136,3 +136,21 @@ The `Toast--animateIn` and `Toast--animateOut` modifier classes can be used to a
   </div>
 </div>
 ```
+
+## Toast position
+
+Use the `position-fixed bottom-0` utility classes on a wrapper element to position Toasts at the **bottom left** of the viewport.
+
+```html title="Toast animating"
+<div class="border bg-gray-light" style="height:150px">
+  <div class="position-fixed bottom-0">
+    <div class="Toast">
+      <span class="Toast-icon">
+        <!-- <%= octicon "info" %> -->
+        <svg class="octicon octicon-info" style="fill:currentColor" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path></svg>
+      </span>
+      <span class="Toast-content">Toast message goes here.</span>
+    </div>
+  </div>
+</div>
+```