From cde45409ac5fb9a2a9c37dae0bc6d678fa6481f8 Mon Sep 17 00:00:00 2001
From: Chris Oyler <chris@zurb.com>
Date: Thu, 14 Jan 2016 13:32:33 -0800
Subject: [PATCH] improves documentation for close-button and callout
 components, specifying how to use Motion UI classes for snazzier animated
 closing of things

---
 docs/pages/callout.md      | 11 ++++++++++-
 docs/pages/close-button.md | 11 +++++++++--
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/docs/pages/callout.md b/docs/pages/callout.md
index 5d0a3db2c..233230b8f 100644
--- a/docs/pages/callout.md
+++ b/docs/pages/callout.md
@@ -67,7 +67,7 @@ Callouts can be colored using the `.secondary`, `.primary`, `.success`, `.warnin
 
 ## Sizing
 
-Callouts can be sized using the `.small` and `.large` classes. These will affect the padding around content to be smaller and larger respectivly. 
+Callouts can be sized using the `.small` and `.large` classes. These will affect the padding around content to be smaller and larger respectivly.
 
 ```html_example
 <div class="callout small">
@@ -91,12 +91,21 @@ Pair the callout with the [close button](close-button.html) component and `data-
 
 <div class="primary callout">
   <p>Any element can be used as a close trigger, not just close button. Adding the attribute <code>data-close</code> to any element within the callout will turn it into a close trigger.</p>
+  <p>When using the <code>data-closable</code> attribute, you can optionally add <a href="http://foundation.zurb.com/sites/docs/motion-ui.html">Motion UI</a> classes to the attribute to change the closing animation. If no class is added, the plugin defaults to jQuery's <code>.fadeOut()</code> function.</p>
 </div>
 
 ```html_example
 <div class="alert callout" data-closable>
   <h5>This is Important!</h5>
   <p>But when you're done reading it, click the close button in the corner to dismiss this alert.</p>
+  <p>I'm using the default <code>data-closable</code> parameters, and simply fade out.</p>
+  <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
+    <span aria-hidden="true">&times;</span>
+  </button>
+</div>
+<div class="success callout" data-closable="slide-out-right">
+  <h5>This a friendly message.</h5>
+  <p>And when you're done with me, I close using a Motion UI animation.</p>
   <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
     <span aria-hidden="true">&times;</span>
   </button>
diff --git a/docs/pages/close-button.md b/docs/pages/close-button.md
index 7ae63a46c..c7fcd4f8c 100644
--- a/docs/pages/close-button.md
+++ b/docs/pages/close-button.md
@@ -25,7 +25,7 @@ The button is also labeled with `aria-label` to clarify what the button's purpos
   <p>The close button on its own doesn't close elements, but you can use it with <a href="toggler.html">Toggler</a>, <a href="reveal.html">Reveal</a>, <a href="off-canvas.html">Off-canvas</a>, and other plugins that have open and close behaviors.</p>
 </div>
 
-For example, pair the callout with the close button component and `data-closable` attribute to create a dismissable alert box.
+For example, pair the callout with the close button component and `data-closable` attribute to create a dismissible alert box.
 
 <div class="primary callout">
   <p>Any element can be used as a close trigger, not just close button. Adding the attribute <code>data-close</code> to any element within the callout will turn it into a close trigger.</p>
@@ -38,4 +38,11 @@ For example, pair the callout with the close button component and `data-closable
     <span aria-hidden="true">&times;</span>
   </button>
 </div>
-```
\ No newline at end of file
+<div class="success callout" data-closable="slide-out-right">
+  <p>You can close me too, and I close using a Motion UI animation.</p>
+  <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
+    <span aria-hidden="true">&times;</span>
+  </button>
+</div>
+
+```
-- 
2.47.2