adds callout links and vid times

diff --git a/docs/pages/callout.md b/docs/pages/callout.md
index c75f241d67f4bea7476ee889aca6318d503e738e..476804148795efaebb742fe45fa8b8aeb90b8e6b 100644 (file)
--- a/docs/pages/callout.md
+++ b/docs/pages/callout.md
@@ -12,6 +12,12 @@ tags:
 
 A callout is just an element with a `.callout` class applied. You can put any kind of content inside.
 
+<div class="docs-video-codepen-container">
+  <a class="" data-open-video="0:39"><img src="https://www.elastic.co/static/images/svg/video-play-btn.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+
+  <a class="codepen-logo-link" href="http://codepen.io/ZURBFoundation/pen/WjyGVB?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/cp1.svg" class="" height="" width="" alt="edit on codepen button"></a>
+</div>
+
 ```html_example
 <div class="callout">
   <h5>This is a callout.</h5>
@@ -26,6 +32,12 @@ A callout is just an element with a `.callout` class applied. You can put any ki
 
 Callouts can be colored using the `.secondary`, `.primary`, `.success`, `.warning`, or `.alert` classes. Links inside the callout will be tinted to match the color of the callout.
 
+<div class="docs-video-codepen-container">
+  <a class="" data-open-video="1:25"><img src="https://www.elastic.co/static/images/svg/video-play-btn.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+
+  <a class="codepen-logo-link" href="http://codepen.io/ZURBFoundation/pen/JNZbGy?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/cp1.svg" class="" height="" width="" alt="edit on codepen button"></a>
+</div>
+
 ```html
 <div class="callout secondary">
   <h5>This is a secondary callout</h5>
@@ -70,6 +82,8 @@ Callouts can be colored using the `.secondary`, `.primary`, `.success`, `.warnin
 
 Callouts can be sized using the `.small` and `.large` classes. These will affect the padding around content to be smaller and larger respectively.
 
+<a class="codepen-logo-link" href="http://codepen.io/ZURBFoundation/pen/ybEVVe?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/cp1.svg" class="" height="" width="" alt="edit on codepen button"></a>
+
 ```html_example
 <div class="callout small">
   <h5>This is a small callout</h5>
@@ -95,6 +109,12 @@ Pair the callout with the [close button](close-button.html) component and `data-
   <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>
 
+<div class="docs-video-codepen-container">
+  <a class="" data-open-video="2:24"><img src="https://www.elastic.co/static/images/svg/video-play-btn.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+
+  <a class="codepen-logo-link" href="http://codepen.io/ZURBFoundation/pen/eWKBBd?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/cp1.svg" class="" height="" width="" alt="edit on codepen button"></a>
+</div>
+
 ```html_example
 <div class="alert callout" data-closable>
   <h5>This is Important!</h5>