Add breadcrumbs codepen!

diff --git a/docs/pages/breadcrumbs.md b/docs/pages/breadcrumbs.md
index 2d45bb8b38104a773108d9337a3812a995f47224..04bf2d5781eb2f2c0fa0ad1da33447ee578ec539 100644 (file)
--- a/docs/pages/breadcrumbs.md
+++ b/docs/pages/breadcrumbs.md
@@ -5,9 +5,7 @@ video: 'vQz-Kv5f_Ts'
 sass: scss/components/_breadcrumbs.scss
 ---
 
-To make a set of breadcrumb links, just add the class `.breadcrumbs` to a `<ul>`, and then add links inside of the `<li>` elements.
-
-The current page doesn't require a link or a class, but you should add some explanatory text for AT that indicates which item is the current page.
+To make a set of breadcrumb links, just add the class `.breadcrumbs` to a `<ul>`, and then add links inside of the `<li>` elements. The current page doesn't require a link or a class, but you should add some explanatory text for AT that indicates which item is the current page.
 
 To mark a disabled item, add the class `.disabled` to the `<li>`, and just use plain text instead of a link.
 
@@ -15,6 +13,12 @@ To mark a disabled item, add the class `.disabled` to the `<li>`, and just use p
   <p>We use a CSS <code>::after</code> element containing a slash character to create the separator between items. Some screen readers will read this character out loud&mdash;if this is an issue, you can use a background image or a separate element with <code>aria-hidden="true"</code> to create the separator instead.</p>
 </div>
 
+<div class="docs-video-codepen-container">
+  <a class="" data-open-video="12:00"><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/IamManchanda/pen/MmGeMx?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/cp1.svg" class="" height="" width="" alt="edit on codepen button"></a>
+</div>
+
 ```html_example
 <nav aria-label="You are here:" role="navigation">
   <ul class="breadcrumbs">