anchor.diff:  
       <hr>
   
  +    <ul id="featured2" data-orbit>
  +      <li data-orbit-slide="headline-1">
  +        <h2>Headline 1</h2>
  +        <h3>Subheadline</h3>
  +        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
  +      </li>
  +      <li data-orbit-slide="headline-2">
  +        <h2>Headline 2</h2>
  +        <h3>Subheadline</h3>
  +        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
  +      </li>
  +      <li data-orbit-slide="headline-3">
  +        <h2>Headline 3</h2>
  +        <h3>Subheadline</h3>
  +        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
  +      </li>
  +    </ul>
  +
  +    <hr>
  +
       <h3>Deep Linking Support</h3>
  -    <p>Click on the links below to automatically advance the slider.</p>
  -    <ul>
  +    <p>
  +      You can now link to slides in Orbit. This is useful when constructing
  +      custom bullets or referencing a particular slide in a description. To
  +      see it in action click on one of the links below:
  +    </p>
  +    
  +    <ul class="disc">
         <li><a href="#" data-orbit-link="headline-1">Goto Slide 1</a></li>
         <li><a href="#" data-orbit-link="headline-2">Goto Slide 2</a></li>
         <li><a href="#" data-orbit-link="headline-3">Goto Slide 3</a></li>
       </ul>
   
  -
  -    <ul id="featured2" data-orbit>
  -      <li>
  -        <h2>Headline 1</h2>
  -        <h3>Subheadline</h3>
  -        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
  -      </li>
  -      <li>
  -        <h2>Headline 2</h2>
  -        <h3>Subheadline</h3>
  -        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
  -      </li>
  -      <li>
  -        <h2>Headline 3</h2>
  -        <h3>Subheadline</h3>
  -        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
  -      </li>
  -    </ul>
  +    <p>
  +      The markup is simple, each <kbd>&lt;li&gt;</kbd> should
  +      have a <kbd>data-orbit-slide</kbd> data attribute with a
  +      unique identifier for the slide. Then anywhere outside
  +      of your Orbit slider you can use <kbd>data-orbit-link</kbd>
  +      to reference that slide.
  +    </p>
  +
  +<%= code_example '
  +<ul id="featured2" data-orbit>
  +  <li data-orbit-slide="headline-1">
  +    <h2>Headline 1</h2>
  +    <h3>Subheadline</h3>
  +    <p>Pellentesque habitant morbi tristique senectus.</p>
  +  </li>
  +  <li data-orbit-slide="headline-2">
  +    <h2>Headline 2</h2>
  +    <h3>Subheadline</h3>
  +    <p>Pellentesque habitant morbi tristique senectus.</p>
  +  </li>
  +  <li data-orbit-slide="headline-3">
  +    <h2>Headline 3</h2>
  +    <h3>Subheadline</h3>
  +    <p>Pellentesque habitant morbi tristique senectus.</p>
  +  </li>
  +</ul>
  +
  +<!-- Now link to the slides above -->
  +<ul class="disc">
  +  <li><a href="#" data-orbit-link="headline-1">Goto Slide 1</a></li>
  +  <li><a href="#" data-orbit-link="headline-2">Goto Slide 2</a></li>
  +  <li><a href="#" data-orbit-link="headline-3">Goto Slide 3</a></li>
  +</ul>
  +', :html %>
   
       <hr>
   
  
positive.code:     <h4 class="subheader">Orbit is an easy to use, powerful image slider built to be responsive and swippable on touch-enabled devices!</h4>
  
      <ul id="featured1" data-orbit>
        <li data-orbit-slide="headline-1">
          <img src="../img/demos/demo1.png" />
          <div class="orbit-caption">
            Caption One. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
          </div>
        </li>
        <li data-orbit-slide="headline-2">
          <img src="../img/demos/demo2.png" />
          <div class="orbit-caption">
            Caption Two. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
          </div>
        </li>
        <li data-orbit-slide="headline-3">
          <img src="../img/demos/demo3.png" />
          <div class="orbit-caption">
            Caption Three. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
  
negative.code:     <hr>
  
      <h3>Using the Javascript</h3>
      <p>You'll need to include <code>foundation.orbit.js</code> if you want to use Orbit. You'll also need to make sure to include <code>zepto.js</code> and/or <code>jquery.js</code> along with <code>foundation.js</code> above the Orbit plugin. Above your closing <code>&lt;/body&gt;</code> tag include the following line of code and make sure you have the JS in your directory:</p>
  
  <%= code_example "
  <script>
    document.write('path/to/'
      + ('__proto__' in {} ? 'zepto' : 'jquery')
      + '.js'><\/script>');
  </script>
  <script src='path/to/foundation.js'></script>
  <script src='path/to/foundation.orbit.js'></script>
  <script type='text/javascript'>
    $(document).foundation();
  </script>
  ", :html %>
  
      <p>Then, you'll need to add a <kbd>data-orbit</kbd> data attribute to make the JS work properly on that element. That looks like:</p>
  
  <%= code_example '
  <ul data-orbit>
  