Update example.html to change to hero image

toolkit-lite-v2/example.html

@@ -47,10 +47,23 @@
 
 
       <div class="il-formatted"> 
+
 <div id="pre_C072_Col00" class="sf_colsIn homepage-video" data-sf-element="Add children here" data-placeholder-label="Add children here">
-<div class="overlay" id="overlay">GREAT MINDS<br><span class="byline">Think EDUCATION AT ILLINOIS</span><a href='/program-finder' class='il-button il-orange' style="background: var(--il-blue);">Explore Our Programs</a></div>
-<video muted="" poster="https://cdn-e.education.illinois.edu/video/first_image.png"><source src="https://cdn-e.education.illinois.edu/video/homepage8.mp4" type="video/mp4" style="max-width: 1260px; margin: auto;">Your browser does not support the video tag.
-</video>
+<il-hero>
+<img src="https://picsum.photos/1920/1280" alt="" slot="background">
+<h1>Innovating solutions every year</h1>
+<ul>
+<li>
+<a href="#">Link 1</a>
+</li>
+<li>
+<a href="#">Link 2</a>
+</li>
+<li>
+<a href="#">Link 3</a>
+</li>
+</ul>
+</il-hero>
 </div> <il-section class="il-fixed-width"> 
 
  </il-section> 
@@ -148,4 +161,4 @@ <h2>Research and Engagement</h2><p>Our mission extends beyond our classrooms and
     </address>
   </il-footer>
 
-</il-page> <aside> <script async="async" src="//enroll.illinois.edu/ping">/**/</script> <script async="async" src="//choose.illinois.edu/ping">/**/</script> </aside>  </body> </html>
+</il-page> <aside> <script async="async" src="//enroll.illinois.edu/ping">/**/</script> <script async="async" src="//choose.illinois.edu/ping">/**/</script> </aside>  </body> </html>