adds close button links and video time

diff --git a/docs/pages/close-button.md b/docs/pages/close-button.md
index c7751a26d870b5d4850934c90f93f877eb68dd17..ed38fec7fe81d140c54b099689e2cd7589f49f92 100644 (file)
--- a/docs/pages/close-button.md
+++ b/docs/pages/close-button.md
@@ -9,6 +9,12 @@ A close button is a `<button>` element with the class `.close-button`. We use th
 
 The button is also labeled with `aria-label` to clarify what the button's purpose is.
 
+<div class="docs-video-codepen-container">
+  <a class="" data-open-video="1:30"><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/xdjEgO?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">
   <button class="close-button" aria-label="Close alert" type="button">
@@ -32,6 +38,12 @@ The button is also labeled with `aria-label` to clarify what the button's purpos
 
 The below example pairs the callout with the close button component and `data-closable` attribute to create a dismissible alert box.
 
+<div class="docs-video-codepen-container">
+  <a class="" data-open-video="1:30"><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="https://codepen.io/ZURBFoundation/pen/JNvEox?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" data-closable>
   <p>You can so totally close this!</p>