From: RafiBomb <rafi@zurb.com>
Date: Wed, 24 May 2017 21:10:51 +0000 (-0700)
Subject: adjust orbit exmple code to use placeholder images for quick copy and use
X-Git-Tag: v6.4.0-rc1~31^2~1
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=d2cd782cd410e3a6e067e3af90aaa47497629a38;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

adjust orbit exmple code to use placeholder images for quick copy and use
---

diff --git a/docs/pages/orbit.md b/docs/pages/orbit.md
index 37be10dd0..1d506d5c1 100644
--- a/docs/pages/orbit.md
+++ b/docs/pages/orbit.md
@@ -22,7 +22,49 @@ Orbit doesn't automatically generate any HTML for you, giving you the flexibilit
   <a class="codepen-logo-link" href="https://codepen.io/IamManchanda/pen/GmGzWY?editors=1100" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
 </div>
 
-```html_example
+```html
+<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
+  <div class="orbit-wrapper">
+    <div class="orbit-controls">
+      <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>
+      <button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>
+    </div>
+    <ul class="orbit-container">
+      <li class="is-active orbit-slide">
+        <figure class="orbit-figure">
+          <img class="orbit-image" src="http://placehold.it/1200x600/999?text=Slide-1" alt="Space">
+          <figcaption class="orbit-caption">Space, the final frontier.</figcaption>
+        </figure>
+      </li>
+      <li class="orbit-slide">
+        <figure class="orbit-figure">
+          <img class="orbit-image" src="http://placehold.it/1200x600/888?text=Slide-2" alt="Space">
+          <figcaption class="orbit-caption">Lets Rocket!</figcaption>
+        </figure>
+      </li>
+      <li class="orbit-slide">
+        <figure class="orbit-figure">
+          <img class="orbit-image" src="http://placehold.it/1200x600/777?text=Slide-3" alt="Space">
+          <figcaption class="orbit-caption">Encapsulating</figcaption>
+        </figure>
+      </li>
+      <li class="orbit-slide">
+        <figure class="orbit-figure">
+          <img class="orbit-image" src="http://placehold.it/1200x600/666&text=Slide-4" alt="Space">
+          <figcaption class="orbit-caption">Outta This World</figcaption>
+        </figure>
+      </li>
+    </ul>
+  </div>
+  <nav class="orbit-bullets">
+    <button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
+    <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
+    <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
+    <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
+  </nav>
+</div>
+```
+
 <div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
   <div class="orbit-wrapper">
     <div class="orbit-controls">
@@ -63,7 +105,6 @@ Orbit doesn't automatically generate any HTML for you, giving you the flexibilit
     <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
   </nav>
 </div>
-```
 
 ---