anchor.diff:          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, officia impedit eius velit consectetur provident ullam! Incidunt, rem, maxime sit non natus praesentium nobis voluptas enim repudiandae. Commodi, eum, accusamus.</p>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, officia impedit eius velit consectetur provident ullam! Incidunt, rem, maxime sit non natus praesentium nobis voluptas enim repudiandae. Commodi, eum, accusamus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, officia impedit eius velit consectetur provident ullam! Incidunt, rem, maxime sit non natus praesentium nobis voluptas enim repudiandae. Commodi, eum, accusamus.</p>
           <a href="#" class="btn js-close-modal">Alright, got it.</a>
  -      </div>
  +      </script>
       <% end %>
   
       <div class="row section">
  
positive.code:     <section class="row section styleguide-section">
        <h2 id="fonts-and-colors">Fonts &amp; Colors</h2>
  
        <h3>Fonts</h3>
        <p>We use Din Regular for most of our text and headings.</p>
        <p class="font-tile" style="font-family: 'din-regular'; font-weight: 400; ">
          Lorem ipsum dolor sit amet. <code>($font-din-regular, 400)</code>
        </p>
  
        <p class="font-tile" style="font-family: 'din-regular'; font-weight: 500; ">
          Lorem ipsum dolor sit amet. <code>($font-din-regular, 500)</code>
        </p>
  
        <p class="font-tile" style="font-family: 'din-regular'; font-weight: 600; ">
          Lorem ipsum dolor sit amet. <code>($font-din-regular, 600)</code>
        </p>
  
        <p>We use Din Condensed for special elements and headings. It should only be used at bigger font sizes for legibility.</p>
        <p class="font-tile" style="font-family: 'din-condensed'; font-weight: 500; font-size: 2rem;">
          Lorem ipsum dolor sit amet. <code>($font-din-condensed, 500)</code>
        </p>
  
  
        <h3>Brand Colors</h3>
        <p class="color-tile" data-hex="#18408b">
          <strong>Blue</strong> <code>($blue)
          <span class="js-color-label">&hellip;</span></code>
        </p>
  
        <p class="color-tile" data-hex="#00b5e0">
          <strong>Light Blue</strong> <code>($light-blue)
          <span class="js-color-label">&hellip;</span></code>
        </p>
  
        <p class="color-tile" data-hex="#fed100">
          <strong>Gold</strong> <code>($gold)
          <span class="js-color-label">&hellip;</span></code>
        </p>
  
        <p class="color-tile" data-hex="#f6e816">
          <strong>Yellow</strong> <code>($yellow)
          <span class="js-color-label">&hellip;</span></code>
        </p>
  
        <!-- 4 Shades of Gray -->
        <h3>Gray Tones</h3>
        <p class="color-tile" data-hex="#333131">
          <strong>Off Black</strong> <code>($off-black)
          <span class="js-color-label">&hellip;</span></code>
        </p>
  
        <p class="color-tile" data-hex="#666">
          <strong>Dark Gray</strong> <code>($dark-gray)
          <span class="js-color-label">&hellip;</span></code>
        </p>
  
        <p class="color-tile" data-hex="#ddd">
          <strong>Light Gray</strong> <code>($light-gray)
          <span class="js-color-label">&hellip;</span></code>
        </p>
  
        <p class="color-tile" data-hex="#f4f4f4">
          <strong>Off White</strong> <code>($off-white)
          <span class="js-color-label">&hellip;</span></code>
        </p>
  
  
negative.code: 
  
  
        <script type="text/cached-modal" id="modal--example">
          <a href="#" class="js-close-modal modal-close-button">&times;</a>
          <h2>Example Content</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, officia impedit eius velit consectetur provident ullam! Incidunt, rem, maxime sit non natus praesentium nobis voluptas enim repudiandae. Commodi, eum, accusamus. Let's take a look at <a href="#modal--pagetwo" class="js-modal-link">another modal</a>.</p>
  