From 0f70577990402d1b18cf8101a19f28e63811117c Mon Sep 17 00:00:00 2001
From: Geoff Kimball <geoff@zurb.com>
Date: Fri, 4 Mar 2016 13:35:04 -0800
Subject: [PATCH] Add docs page for callout

---
 docs/pages/callout.md             | 40 +++++++++++++++++++++++++++++++
 docs/partials/component-list.html |  8 +++----
 package.json                      |  2 +-
 3 files changed, 45 insertions(+), 5 deletions(-)
 create mode 100644 docs/pages/callout.md

diff --git a/docs/pages/callout.md b/docs/pages/callout.md
new file mode 100644
index 00000000..cf5c33b6
--- /dev/null
+++ b/docs/pages/callout.md
@@ -0,0 +1,40 @@
+---
+title: Callout
+description: Formerly panels, callouts can be used to create sidebar panels or call out important content in an email.
+sass: scss/components/_callout.scss
+tags:
+  - panel
+  - alert
+---
+
+## Basics
+
+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.
+
+```inky
+<callout>
+  <p>Beware of the Kraken!</p>
+</callout>
+```
+
+---
+
+## Coloring Classes
+
+The color of a callout can be changed by adding the class `.success`, `.warning`, or `.alert` to the element.
+
+```inky
+<callout class="success">
+  <p>Successfully avoided Kraken.</p>
+</callout>
+
+<callout class="warning">
+  <p>There may be Krakens around.</p>
+</callout>
+
+<callout class="alert">
+  <p>Incoming Kraken!</p>
+</callout>
+```
diff --git a/docs/partials/component-list.html b/docs/partials/component-list.html
index 78793892..c74aa018 100644
--- a/docs/partials/component-list.html
+++ b/docs/partials/component-list.html
@@ -5,11 +5,11 @@
   </p>
 
   <li class="docs-nav-title">Components</li>
-  <li><a href="">Alignment</a></li>
-  <li><a href="">Block Grid</a></li>
+  <li><a href="alignment.html">Alignment</a></li>
+  <li><a href="block-grid.html">Block Grid</a></li>
   <li><a href="button.html">Button</a></li>
-  <li><a href="">Callout</a></li>
-  <li><a href="">Global</a></li>
+  <li><a href="callout.html">Callout</a></li>
+  <li><a href="global.html">Global</a></li>
 
   <li class="docs-nav-title">Grid</li>
   <li><a href="">Grid</a></li>
diff --git a/package.json b/package.json
index 617c2d5f..bab4c09e 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "browser-sync": "^2.9.10",
     "cheerio": "^0.19.0",
     "foundation-docs": "zurb/foundation-docs",
-    "foundation-sites": "^6.0.5",
+    "foundation-sites": "^6.2.0",
     "gulp": "^3.8.11",
     "gulp-autoprefixer": "^2.3.1",
     "gulp-cached": "^1.1.0",
-- 
2.47.2