Add magellan codepen!

diff --git a/docs/pages/kitchen-sink.md b/docs/pages/kitchen-sink.md
index 1b8e8a4824ea2a933c5f96cb50a8a3f490643d42..d92f571fd40a765f680689745869a061cc0c35c8 100644 (file)
--- a/docs/pages/kitchen-sink.md
+++ b/docs/pages/kitchen-sink.md
@@ -688,6 +688,12 @@ description: Everything but.
 
 ## Magellan
 
+<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/MmGEXo?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/cp1.svg" class="" height="" width="" alt="edit on codepen button"></a>
+</div>
+
 ```html
 <ul class="horizontal menu" data-magellan>
   <li><a href="#first">First Arrival</a></li>
@@ -704,7 +710,7 @@ description: Everything but.
     <p>Sed vulputate, felis interdum molestie viverra, neque urna placerat dui, ac efficitur est magna eu tellus. Nunc sodales consequat eros at bibendum. Vestibulum hendrerit gravida elit non eleifend. Nunc at vehicula ipsum. Vestibulum eu suscipit felis. Proin ipsum felis, consequat congue quam ac, efficitur tincidunt ex. Morbi accumsan sem iaculis nunc malesuada tincidunt.</p>
   </section>
   <section id="third" data-magellan-target="third">
-    <h4>Second section</h4>
+    <h4>Third section</h4>
     <p>Aliquam orci orci, maximus a pulvinar id, tincidunt a neque. Suspendisse eros diam, finibus et faucibus ac, suscipit feugiat orci. Morbi scelerisque sem id blandit malesuada. Donec suscipit tincidunt dolor in blandit. Nam rhoncus risus vitae lacinia dictum. Cras lobortis, nulla non faucibus mattis, tellus nibh condimentum eros, posuere volutpat arcu risus vel ante. In ut ullamcorper eros, et vestibulum risus. Fusce auctor risus vitae diam viverra tincidunt.</p>
   </section>
 </div>