From: RafiBomb <rafi@zurb.com>
Date: Mon, 21 Mar 2016 05:53:42 +0000 (-0700)
Subject: updates callout docs
X-Git-Tag: v2.0.0-rc.4~12
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=cefd70e6b0af486e509a03c616a3f7f1d86ef981;p=thirdparty%2Ffoundation%2Ffoundation-emails.git

updates callout docs
---

diff --git a/docs/pages/callout.md b/docs/pages/callout.md
index a2aeadab..3e526130 100644
--- 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>