updates callout docs

diff --git a/docs/pages/callout.md b/docs/pages/callout.md
index a2aeadabd26b4e40e8cb5a37db454e35c95f3fcb..3e526130555caa7a94e3e3561dbd453404edf925 100644 (file)
--- a/docs/pages/callout.md
+++ b/docs/pages/callout.md
@@ -9,13 +9,28 @@ tags:
 
 ## Basics
 
-Callouts use a full table structure, with the class `.callout` applied to the innermost `<th>`.
+Al Callout adds a border, background, and some padding. Callouts use a full table structure, with the class `.callout` applied to the innermost `<th>`.
 
-When using [Inky](inky.html) HTML, the `<callout>` tag will create this structure for you.
+When using [Inky](inky.html) HTML, the `<callout>` tag will create this structure for you. You can wrap them around a row or inside a column.
 
 ```inky_example
-<callout>
-  <p>Beware of the Kraken! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
+<row>
+  <columns small="6">
+    <p>Not in a callout :(</p>
+  </columns>
+  <columns small="6">
+    <callout class="secondary">
+      <p>I'm in a callout!</p>
+    </callout>
+  </columns>
+</row>
+
+<callout class="primary">
+  <row>
+    <columns small="12">
+      <p>This whole row is in a callout!</p>
+    </columns>
+  </row>
 </callout>
 ```
 
@@ -23,9 +38,12 @@ When using [Inky](inky.html) HTML, the `<callout>` tag will create this structur
 
 ## Coloring Classes
 
-The color of a callout can be changed by adding the class `.success`, `.warning`, or `.alert` to the element.
+The color of a callout can be changed by adding the class `.primary`, `.success`, `.warning`, or `.alert` to the element. A callout without a color class will have a white background.
 
 ```inky_example
+<callout>
+  <p>Successfully avoided Kraken. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
+</callout>
 <callout class="primary">
   <p>Successfully avoided Kraken. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
 </callout>