adds button group links

diff --git a/docs/pages/button-group.md b/docs/pages/button-group.md
index 05f9008155e1ffd1775b4d0c3b70885c2a0c24e1..295b93f46f99561d392f86bd119ce9fbbd56201c 100644 (file)
--- a/docs/pages/button-group.md
+++ b/docs/pages/button-group.md
@@ -12,6 +12,12 @@ flexbox: true
 
 Add the `.button-group` class to a container, and inside it place any number of buttons. The buttons are separated by a small border.
 
+<div class="docs-video-codepen-container">
+  <a class="" data-open-video="0:40"><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/JNvXam?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="button-group">
   <a class="button">One</a>
@@ -26,6 +32,12 @@ Add the `.button-group` class to a container, and inside it place any number of
 
 Button groups can be sized with the same classes as standard buttons: `.tiny`, `.small`, and `.large`.
 
+<div class="docs-video-codepen-container">
+  <a class="" data-open-video="0:40"><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/dWeMwL?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="small button-group">
   <a class="button">Small</a>
@@ -40,6 +52,12 @@ Button groups can be sized with the same classes as standard buttons: `.tiny`, `
 
 Buttons within a button group can be colored individually with the `.secondary`, `.success`, `.warning`, and `.alert` classes.
 
+<div class="docs-video-codepen-container">
+  <a class="" data-open-video="0:40"><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/KmRzEq?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="button-group">
   <a class="secondary button">View</a>
@@ -66,6 +84,12 @@ The entire group can also be colored using the same classes.
 
 Add the `.expanded` class to the container to make a full-width button group. Each item will automatically size itself based on how many buttons there are, up to a maximum of six.
 
+<div class="docs-video-codepen-container">
+  <a class="" data-open-video="2:49"><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/bWMpXB?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="expanded button-group">
   <a class="button">Expanded</a>
@@ -80,6 +104,12 @@ Add the `.expanded` class to the container to make a full-width button group. Ea
 
 A button group can be made vertical with the `.stacked` class. You can also use `.stacked-for-small` to only stack a button group on small screens, or `.stacked-for-medium` to only stack on small and medium screens.
 
+<div class="docs-video-codepen-container">
+  <a class="" data-open-video="5:14"><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/bWMemL?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="stacked-for-small button-group">
   <a class="button">How</a>
@@ -98,6 +128,12 @@ To build a split button, just create a button group with two buttons.
 
 To create a button with only an arrow, add the class `.arrow-only`. Note that the button still needs a label for screen readers, which can be embedded inside the button with a `.show-for-sr` element. In the example below, an assistive device will read the arrow button as "Show menu".
 
+<div class="docs-video-codepen-container">
+  <a class="" data-open-video="7:32"><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/GmdjKM?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="button-group">
   <a class="button">Primary Action</a>