Lehigh Clutch Style Guide

Footer - Option 1 

<section id="department_footer">
    <!-- region for footer-center or footer-main -->
    <footer class="footer-wrapper">
        <!-- Single Block styled as department footer -->

        <h2>Lehigh's New theme- clutch</h2>
        <ul class="social-media">

        </ul>

        <ul class="contact-info">
        </ul>

    </footer>
</section>
<footer id="site_footer">
    <div class="footer-wrapper">
        <div class="logo" role="logo">
            <picture class="image lehigh-logo e11y-ok">
                <a href="" class="logo__link">
                    <img class="web" src="/img/lehigh-logo.svg" alt="Lehigh University logo" width="200" height="43" />
                    <span class="u-a11y-text">Go to homepage</span>
                </a>
            </picture>
        </div><!-- end logo -->
        <div class="lehigh-contact">
            <address>27 Memorial Drive West<br />
                Bethlehem, PA 18015, USA</address>
            <span class="phone"><a href="tel:610-758-3000">610-758-3000</a></span>
        </div>
        <div class="copyright">
            <p>&copy; <script>
                    document.write(new Date().getFullYear());
                </script> Lehigh University. <a href="http://www1.lehigh.edu/about/copyright?footer">All Rights Reserved</a>.
                <a href="http://www1.lehigh.edu/about/privacy?footer">Privacy</a>. <a href="http://www1.lehigh.edu/about/serviceagreement?footer">Terms</a>
            </p>
        </div><!-- end copyright -->
        <div class="common-links">
            <ul>
                <li><a href="http://www1.lehigh.edu/insidelehigh?footer">Inside Lehigh</a></li>
                <li><a href="http://www.lehigh.edu/~www/directory/?footer">Directory</a></li>
                <li><a href="http://www1.lehigh.edu/about/maps?footer">Maps</a></li>
                <li><a href="http://www1.lehigh.edu/contactlehigh">Contact</a></li>
                <li><a href="http://www1.lehigh.edu/emergency">Emergency Info</a></li>
                <li><a href="http://www1.lehigh.edu/about/mobilefriendly?footer">Mobile Friendly</a></li>
                <li><a href="http://www.lehigh.edu/~inprv/heoa/index.html">Higher Education Opportunity Act</a></li>
                <li><a href="http://www.lehigh.edu/principlesequity?footer">Equitable Community</a></li>
                <li><a href="http://www.lehigh.edu/nondiscrimination?footer">Non-Discrimination</a></li>
            </ul>
        </div><!-- end common-links -->
    </div>
</footer>
 
{% block department_footer %}
<section id="department_footer">
  <!-- region for footer-center or footer-main -->
  <footer class="footer-wrapper">
    <!-- Single Block styled as department footer -->
    {% include "@department_footer" %}
  </footer>
</section>
{% endblock %}
{% block site_footer %}
    {% include "@site_footer" %}
{% endblock %}
 
{
  "website_title": "Lehigh's New theme- clutch",
  "site_logo": "/img/lehigh-logo.svg",
  "footer_fa_icons": {
    "1": {
      "name": "Phone Number",
      "class": "fas fa-phone",
      "description": "(610) 758 4025"
    },
    "2": {
      "name": "Address",
      "class": "fas fa-map-marker-alt",
      "address": "19 Memorial Drive W.<br /> Lehigh University<br /> Bethlehem, PA<br/> 18015",
      "link": "https://www.google.com/maps/@40.6078606,-75.379379,19z"
    },
    "3": {
      "name": "Email address",
      "class": "fas fa-envelope",
      "email": "email@lehigh.edu"
    }
  }
}

Display an option for the footer to include a department footer above the site footer.