anchor.diff:      <li><a href="#intro" class="js-jump-scroll">Introduction</a></li>
   
       <li>
  -    <a href="#base" class="js-jump-scroll">Base Styles</a>
  -    <ul>
  -      <li><a href="#base" class="js-jump-scroll">Base Elements</a></li>
  -      <li><a href="#fonts-and-colors" class="js-jump-scroll">Fonts &amp; Colors</a></li>
  -      <li><a href="#grid" class="js-jump-scroll">Grid System</a></li>
  -      <li><a href="#animation" class="js-jump-scroll">Animation</a></li>
  -    </ul>
  -    </li>
  -
  -    <li>
  -    <a href="#components" class="js-jump-scroll">Components</a>
  -    <ul>
  -      <li><a href="#forms" class="js-jump-scroll">Forms</a></li>
  -      <li><a href="#footnote" class="js-jump-scroll">Footnote</a></li>
  -      <li><a href="#heading" class="js-jump-scroll">Heading</a></li>
  -      <li><a href="#list" class="js-jump-scroll">List</a></li>
  -      <li><a href="#message-callout" class="js-jump-scroll">Message Callout</a></li>
  -      <li><a href="#messages" class="js-jump-scroll">Messages</a></li>
  -      <li><a href="#social-icon" class="js-jump-scroll">Social Icon</a></li>
  -      <li><a href="#spinner" class="js-jump-scroll">Spinner</a></li>
  -      <li><a href="#media-video" class="js-jump-scroll">Media Video</a></li>
  -      <li><a href="#waypoints" class="js-jump-scroll">Waypoints</a></li>
  -    </ul>
  -    </li>
  -
  -    <li>
  -    <a href="#modules" class="js-jump-scroll">Modules</a>
  -    <ul>
  -      <li><a href="#call-to-action" class="js-jump-scroll">Call To Action</a></li>
  -      <li><a href="#figure" class="js-jump-scroll">Figure</a></li>
  -      <li><a href="#gallery" class="js-jump-scroll">Gallery</a></li>
  -      <li><a href="#info-bar" class="js-jump-scroll">Info Bar</a></li>
  -      <li><a href="#polaroid" class="js-jump-scroll">Polaroid</a></li>
  -      <li><a href="#tabs" class="js-jump-scroll">Tabs</a></li>
  -      <li><a href="#tile" class="js-jump-scroll">Tile</a></li>
  -    </ul>
  -    </li>
  -
  -    <li>
  -    <a href="#regions" class="js-jump-scroll">Regions</a>
  -    <ul>
  -      <li><a href="#chrome" class="js-jump-scroll">Chrome</a></li>
  -      <li><a href="#container" class="js-jump-scroll">Container</a></li>
  -      <li><a href="#footer" class="js-jump-scroll">Footer</a></li>
  -      <li><a href="#header" class="js-jump-scroll">Header</a></li>
  -      <li><a href="#modal" class="js-jump-scroll">Modal</a></li>
  -      <li><a href="#navigation" class="js-jump-scroll">Navigation</a></li>
  -    </ul>
  +      <a href="#base" class="js-jump-scroll">Base Styles</a>
  +      <ul>
  +        <li><a href="#base" class="js-jump-scroll">Base Elements</a></li>
  +        <li><a href="#fonts-and-colors" class="js-jump-scroll">Fonts &amp; Colors</a></li>
  +        <li><a href="#grid" class="js-jump-scroll">Grid System</a></li>
  +        <li><a href="#animation" class="js-jump-scroll">Animation</a></li>
  +      </ul>
  +    </li>
  +
  +    <li>
  +      <a href="#components" class="js-jump-scroll">Components</a>
  +      <ul>
  +        <li><a href="#forms" class="js-jump-scroll">Forms</a></li>
  +        <li><a href="#footnote" class="js-jump-scroll">Footnote</a></li>
  +        <li><a href="#heading" class="js-jump-scroll">Heading</a></li>
  +        <li><a href="#list" class="js-jump-scroll">List</a></li>
  +        <li><a href="#message-callout" class="js-jump-scroll">Message Callout</a></li>
  +        <li><a href="#messages" class="js-jump-scroll">Messages</a></li>
  +        <li><a href="#social-icon" class="js-jump-scroll">Social Icon</a></li>
  +        <li><a href="#spinner" class="js-jump-scroll">Spinner</a></li>
  +        <li><a href="#media-video" class="js-jump-scroll">Media Video</a></li>
  +        <li><a href="#waypoints" class="js-jump-scroll">Waypoints</a></li>
  +      </ul>
  +    </li>
  +
  +    <li>
  +      <a href="#modules" class="js-jump-scroll">Modules</a>
  +      <ul>
  +        <li><a href="#call-to-action" class="js-jump-scroll">Call To Action</a></li>
  +        <li><a href="#figure" class="js-jump-scroll">Figure</a></li>
  +        <li><a href="#gallery" class="js-jump-scroll">Gallery</a></li>
  +        <li><a href="#info-bar" class="js-jump-scroll">Info Bar</a></li>
  +        <li><a href="#polaroid" class="js-jump-scroll">Polaroid</a></li>
  +        <li><a href="#tabs" class="js-jump-scroll">Tabs</a></li>
  +        <li><a href="#tile" class="js-jump-scroll">Tile</a></li>
  +      </ul>
  +    </li>
  +
  +    <li>
  +      <a href="#regions" class="js-jump-scroll">Regions</a>
  +      <ul>
  +        <li><a href="#chrome" class="js-jump-scroll">Chrome</a></li>
  +        <li><a href="#container" class="js-jump-scroll">Container</a></li>
  +        <li><a href="#footer" class="js-jump-scroll">Footer</a></li>
  +        <li><a href="#header" class="js-jump-scroll">Header</a></li>
  +        <li><a href="#modal" class="js-jump-scroll">Modal</a></li>
  +        <li><a href="#navigation" class="js-jump-scroll">Navigation</a></li>
  +      </ul>
       </li>
   
       <li><a href="#resources" class="js-jump-scroll">Resources</a></li>
  
positive.code:     <% end %>
    </div>
  
      <% styleguide_block  'Footnote' do %>
      <h4>Legal text example:</h4>
      <p class="footnote">By clicking submit, you agree to <a href="#">sell your soul</a> to the lorem ipsum dolor sit amet.</p>
  
      <h4>Source footnote example:</h4>
      <div class="footnote">
        <h4 class="js-footnote-toggle">Sources</h4>
  
        <ul class="js-footnote-hidden">
          <li><sup>1</sup> Clark, Barry. "A Treatise on The Motherland", British Royal Archives, 2009.</li>
          <li><sup>2</sup> Lorch, Julie. "Coffee Sure Is Great", Royal Academy of Coffee, 2010.</li>
        </ul>
      </div>
      <% end %>
  
  
      <% styleguide_block  'Heading' do %>
        <h2 class="heading $modifier_class"><span>Heading</span></h2>
      <% end %>
  
      <% styleguide_block  'List' do %>
        <p>An unordered list:</p>
        <ul class="list $modifier_class">
          <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non pretium risus. Sed ultrices dolor magna, in ultricies sapien ornare ac.</li>
          <li>Curabitur sed odio aliquet, efficitur diam vel, laoreet ipsum. Curabitur faucibus tincidunt augue.</li>
          <li>In non pretium risus. Sed ultrices dolor magna, in ultricies sapien ornare ac.</li>
        </ul>
  
  
        <p>And an ordered list:</p>
        <ol class="list $modifier_class">
          <li>Know it.</li>
          <li>Plan it.</li>
          <li>???</li>
          <li>Profit.</li>
        </ol>
      <% end %>
  
      <% styleguide_block  'Message Callout' do %>
        <div class="message-callout $modifier_class">
          <div class="message-callout__copy">
            <p>This is something. Mic drop!</p>
          </div>
        </div>
      <% end %>
  
      <% styleguide_block 'Messages' do %>
        <div class="messages $modifier_class"><strong>There's something <em>I need</em></strong> to tell you.</div>
      <% end %>
  
      <% styleguide_block 'Social Icon' do %>
      <a class="social-icon $modifier_class"><span>Text Fallback</span></a>
      <% end %>
  
      <% styleguide_block  'Spinner' do %>
        <div class="spinner"></div>
      <% end %>
  
      <% styleguide_block 'Media Video' do %>
        <div class="media-video">
          <iframe width="560" height="315" src="//www.youtube.com/embed/bkK2C0iBFt8?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
        </div>
      <% end %>
  
      <% styleguide_block  'Waypoints' do %>
        <ul class="waypoints $modifier_class">
          <li class="is-active"><a href="#">Section One</a></li>
          <li><a href="#">Section Two</a></li>
          <li><a class="waypoints__primary-link" href="#">Section Three</a></li>
        </ul>
      <% end %>
  
      <h2 id="modules">Modules</h2>
      <p>Modules are groups of components, and generally work as a standalone part of an interface. They may even contain other modules (for example, the gallery module contains multiple tile modules).</p>
  
      <% styleguide_block 'Call To Action' do %>
        <div class="cta">
          <div class="wrapper">
            <p class="cta__message">Miscreant! You should pay homage to our future kitten overlords:</p>
            <a href="#" class="button">Support Our Kittens</a>
          </div>
        </div>
      <% end %>
  
      <% styleguide_block  'Figure' do %>
        <article class="figure $modifier_class">
          <div class="figure__media">
            <img alt="kitten overlords" src="http://placekitten.com/g/300/300" />
          </div>
  
          <div class="figure__body">
            <b>Teen Vogue</b> featured Comeback Clothes as one of the ways
            fashion brands like H&amp;M are "taking eco-chic to the next level."
          </div>
        </article>
      <% end %>
  
    <div id="gallery">
      <% styleguide_block  'Gallery - Quartet' do %>
  
negative.code:   <a class="button -secondary button--preview js-styleguide-animation-preview" data-class="shake">Preview</a>
    <% end %>
  
    <h2 id="components">Components</h2>
    <p>We don't want to re-invent the wheel. Re-usable interface patterns are catalogued within Neue to promote consistency throughout our interfaces and minimize code bloat. We start by defining atomic components. These are the smallest building blocks of our interfaces.</p>
  
    <div id="forms">
      <% styleguide_block  'Forms - Button' do %>
  