Footer Stable Updated

The bottom edge of the site or application.

Slim footer

<footer class="footer">
  <div class="container">
    <div class="row">
      <div class="col-12">
          <hr>
          <ul class="legal-links">
            <li class="legal-links__item">Siemens Healthcare GmbH ©2019</li>
            <li class="legal-links__item"><a href="https://www.siemens-healthineers.com/corporate-info" class="legal-links__link">Corporate Information</a></li>
            <li class="legal-links__item"><a href="https://www.siemens-healthineers.com/siemens-website-privacy-policy" class="legal-links__link">Privacy Policy</a></li>
            <li class="legal-links__item"><a href="https://www.siemens-healthineers.com/cookie" class="legal-links__link">Cookie Policy</a></li>
            <li class="legal-links__item"><a href="https://www.siemens-healthineers.com/terms-of-use" class="legal-links__link">Terms of Use</a></li>
          </ul>      </div>
    </div>
  </div>
</footer>

Rich footer

<footer class="footer">
  <div class="container">
      <div class="row">
        <div class="col-12">
          <hr>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div class="sitemap">
            <div class="row">
              <div class="col-12 col-md-6 col-lg-4 col-xl-3">
                <h5 class="sitemap__title">
                  <a href="#" class="">Products &amp; Services</a>
                </h5>
                <ul class="bare-list sitemap__list">
                  <li class="sitemap__item">
                    <a href="#" class="sitemap__link">Medical Imaging</a>
                  </li>
                  <li class="sitemap__item">
                    <a href="#" class="sitemap__link">Ultrasound</a>
                  </li>
                  <li class="sitemap__item">
                    <a href="#" class="sitemap__link">Laboratory Diagnostics</a>
                  </li>
                  <li class="sitemap__item">
                    <a href="#" class="sitemap__link">Point-of-Care-Testing</a>
                  </li>
                  <li class="sitemap__item">
                    <a href="#" class="sitemap__link">Healthcare IT</a>
                  </li>
                  <li class="sitemap__item">
                    <a href="#" class="sitemap__link">Services</a>
                  </li>
                  <li class="sitemap__item">
                    <a href="#" class="sitemap__link">Clinical Specialties &amp; Diseases</a>
                  </li>
                </ul>
              </div>
              <div class="col-12 col-md-6 col-lg-4 col-xl-3">
                <h5 class="sitemap__title">
                  <a href="#" class="">Support &amp; Documentation</a>
                </h5>
                <ul class="bare-list sitemap__list">
                  <li class="sitemap__item">
                    <a href="#" class="sitemap__link">Document Library (SDS, IFU, etc.)</a>
                  </li>
                  <li class="sitemap__item">
                    <a href="#" class="sitemap__link">Education &amp; Training</a>
                  </li>
                  <li class="sitemap__item">
                    <a href="#" class="sitemap__link">PEPconnect <i class="icon-extern"></i></a>
                  </li>
                  <li class="sitemap__item">
                    <a href="#" class="sitemap__link">LifeNet</a>
                  </li>
                  <li class="sitemap__item">
                    <a href="#" class="sitemap__link">Webshop <i class="icon-extern"></i></a>
                  </li>
                  <li class="sitemap__item">
                    <a href="#" class="sitemap__link">All Online Services <i class="icon-extern"></i></a>
                  </li>
                </ul>
              </div>
              <div class="col-12 col-md-6 col-lg-4 col-xl-3">
                <h5 class="sitemap__title">
                  <a href="#" class="">Insights</a>
                </h5>
                <ul class="bare-list sitemap__list">
                  <li class="sitemap__item">
                    <a href="#" class="sitemap__link">Expanding Precision Medicine</a>
                  </li>
                  <li class="sitemap__item">
                    <a href="#" class="sitemap__link">Improving Patient Experience</a>
                  </li>
                  <li class="sitemap__item">
                    <a href="#" class="sitemap__link">Transforming Care Delivery</a>
                  </li>
                  <li class="sitemap__item">
                    <a href="#" class="sitemap__link">Digitalizing Healthcare</a>
                  </li>
                </ul>
              </div>
              <div class="col-12 col-md-6 col-lg-4 col-xl-3">
                <h5 class="sitemap__title">
                  <a href="#" class="">About Us</a>
                </h5>
                <ul class="bare-list sitemap__list">
                  <li class="sitemap__item">
                    <a href="#" class="sitemap__link">About Siemens Healthineers</a>
                  </li>
                  <li class="sitemap__item">
                    <a href="#" class="sitemap__link">Conference &amp; Events</a>
                  </li>
                  <li class="sitemap__item">
                    <a href="#" class="sitemap__link">News &amp; Stories</a>
                  </li>
                  <li class="sitemap__item">
                    <a href="#" class="sitemap__link">Press Room</a>
                  </li>
                  <li class="sitemap__item">
                    <a href="#" class="sitemap__link">Investor Relations <i class="icon-extern"></i></a>
                  </li>
                  <li class="sitemap__item">
                    <a href="#" class="sitemap__link">Careers</a>
                  </li>
                  <li class="sitemap__item">
                    <a href="#" class="sitemap__link">Contact Us</a>
                  </li>
                  <li class="sitemap__item">
                    <a href="#" class="sitemap__link">Job Search <i class="icon-extern"></i></a>
                  </li>
                </ul>
              </div>
            </div>
          </div>        </div>
      </div>
      <div class="row">
        <div class="col-12 col-md-6 col-lg-4 col-xl-3">
            <h5 class="footer__col-title">&nbsp;</h5>
            <ul class="social-list">
              <li class="social-list__item">
                <a href="https://twitter.com/SiemensHealth" title="Twitter" class="button button--control" target="_blank">
                  <i class="icon-twitter"></i>
                  <span class="visually-hidden">Twitter</span>
                </a>
              </li>
              <li class="social-list__item">
                <a href="https://www.facebook.com/SiemensHealthineers" title="Facebook" class="button button--control " target="_blank">
                  <i class="icon-facebook"></i>
                  <span class="visually-hidden">Facebook</span>
                </a>
              </li>
              <li class="social-list__item">
                <a href="https://www.instagram.com/siemens.healthineers/" title="Instagram" class="button button--control" target="_blank">
                  <i class="icon-instagram"></i>
                  <span class="visually-hidden">Instagram</span>
                </a>
              </li>
              <li class="social-list__item">
                <a href="https://www.linkedin.com/company/siemens-healthineers" title="LinkedIn" class="button button--control" target="_blank">
                  <i class="icon-linkedin"></i>
                  <span class="visually-hidden">LinkedIn</span>
                </a>
              </li>
              <li class="social-list__item">
                <a href="https://www.youtube.com/siemenshealthineers" title="Youtube" class="button button--control" target="_blank">
                  <i class="icon-youtube"></i>
                  <span class="visually-hidden">Youtube</span>
                </a>
              </li>
            </ul>        </div>
        <div class="col-12 col-md-6 col-lg-4 col-xl-3">
            <h5  class="footer__col-title" id="subscribe">Newsletter</h5>
            <a href="#" title="Subscribe" class="button button--primary" target="_blank">Subscribe</a>        </div>
        <div class="col-12 col-md-6 col-lg-4 col-xl-3">
        </div>
      </div>
    <div class="row">
      <div class="col-12">
          <hr>
          <ul class="legal-links">
            <li class="legal-links__item">Siemens Healthcare GmbH ©2019</li>
            <li class="legal-links__item"><a href="https://www.siemens-healthineers.com/corporate-info" class="legal-links__link">Corporate Information</a></li>
            <li class="legal-links__item"><a href="https://www.siemens-healthineers.com/siemens-website-privacy-policy" class="legal-links__link">Privacy Policy</a></li>
            <li class="legal-links__item"><a href="https://www.siemens-healthineers.com/cookie" class="legal-links__link">Cookie Policy</a></li>
            <li class="legal-links__item"><a href="https://www.siemens-healthineers.com/terms-of-use" class="legal-links__link">Terms of Use</a></li>
          </ul>      </div>
    </div>
  </div>
</footer>

Dark footer

<footer class="footer bg-color-gray-shade-4">
  <div class="container">
      <div class="row">
        <div class="col-12">
          <hr>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div class="sitemap">
            <div class="row">
              <div class="col-12 col-md-6 col-lg-4 col-xl-3">
                <h5 class="sitemap__title">
                  <a href="#" class="">Products &amp; Services</a>
                </h5>
                <ul class="bare-list sitemap__list">
                  <li class="sitemap__item">
                    <a href="#" class="sitemap__link">Medical Imaging</a>
                  </li>
                  <li class="sitemap__item">
                    <a href="#" class="sitemap__link">Ultrasound</a>
                  </li>
                  <li class="sitemap__item">
                    <a href="#" class="sitemap__link">Laboratory Diagnostics</a>
                  </li>
                  <li class="sitemap__item">
                    <a href="#" class="sitemap__link">Point-of-Care-Testing</a>
                  </li>
                  <li class="sitemap__item">
                    <a href="#" class="sitemap__link">Healthcare IT</a>
                  </li>
                  <li class="sitemap__item">
                    <a href="#" class="sitemap__link">Services</a>
                  </li>
                  <li class="sitemap__item">
                    <a href="#" class="sitemap__link">Clinical Specialties &amp; Diseases</a>
                  </li>
                </ul>
              </div>
              <div class="col-12 col-md-6 col-lg-4 col-xl-3">
                <h5 class="sitemap__title">
                  <a href="#" class="">Support &amp; Documentation</a>
                </h5>
                <ul class="bare-list sitemap__list">
                  <li class="sitemap__item">
                    <a href="#" class="sitemap__link">Document Library (SDS, IFU, etc.)</a>
                  </li>
                  <li class="sitemap__item">
                    <a href="#" class="sitemap__link">Education &amp; Training</a>
                  </li>
                  <li class="sitemap__item">
                    <a href="#" class="sitemap__link">PEPconnect <i class="icon-extern"></i></a>
                  </li>
                  <li class="sitemap__item">
                    <a href="#" class="sitemap__link">LifeNet</a>
                  </li>
                  <li class="sitemap__item">
                    <a href="#" class="sitemap__link">Webshop <i class="icon-extern"></i></a>
                  </li>
                  <li class="sitemap__item">
                    <a href="#" class="sitemap__link">All Online Services <i class="icon-extern"></i></a>
                  </li>
                </ul>
              </div>
              <div class="col-12 col-md-6 col-lg-4 col-xl-3">
                <h5 class="sitemap__title">
                  <a href="#" class="">Insights</a>
                </h5>
                <ul class="bare-list sitemap__list">
                  <li class="sitemap__item">
                    <a href="#" class="sitemap__link">Expanding Precision Medicine</a>
                  </li>
                  <li class="sitemap__item">
                    <a href="#" class="sitemap__link">Improving Patient Experience</a>
                  </li>
                  <li class="sitemap__item">
                    <a href="#" class="sitemap__link">Transforming Care Delivery</a>
                  </li>
                  <li class="sitemap__item">
                    <a href="#" class="sitemap__link">Digitalizing Healthcare</a>
                  </li>
                </ul>
              </div>
              <div class="col-12 col-md-6 col-lg-4 col-xl-3">
                <h5 class="sitemap__title">
                  <a href="#" class="">About Us</a>
                </h5>
                <ul class="bare-list sitemap__list">
                  <li class="sitemap__item">
                    <a href="#" class="sitemap__link">About Siemens Healthineers</a>
                  </li>
                  <li class="sitemap__item">
                    <a href="#" class="sitemap__link">Conference &amp; Events</a>
                  </li>
                  <li class="sitemap__item">
                    <a href="#" class="sitemap__link">News &amp; Stories</a>
                  </li>
                  <li class="sitemap__item">
                    <a href="#" class="sitemap__link">Press Room</a>
                  </li>
                  <li class="sitemap__item">
                    <a href="#" class="sitemap__link">Investor Relations <i class="icon-extern"></i></a>
                  </li>
                  <li class="sitemap__item">
                    <a href="#" class="sitemap__link">Careers</a>
                  </li>
                  <li class="sitemap__item">
                    <a href="#" class="sitemap__link">Contact Us</a>
                  </li>
                  <li class="sitemap__item">
                    <a href="#" class="sitemap__link">Job Search <i class="icon-extern"></i></a>
                  </li>
                </ul>
              </div>
            </div>
          </div>        </div>
      </div>
      <div class="row">
        <div class="col-12 col-md-6 col-lg-4 col-xl-3">
            <h5 class="footer__col-title">&nbsp;</h5>
            <ul class="social-list">
              <li class="social-list__item">
                <a href="https://twitter.com/SiemensHealth" title="Twitter" class="button button--control" target="_blank">
                  <i class="icon-twitter"></i>
                  <span class="visually-hidden">Twitter</span>
                </a>
              </li>
              <li class="social-list__item">
                <a href="https://www.facebook.com/SiemensHealthineers" title="Facebook" class="button button--control " target="_blank">
                  <i class="icon-facebook"></i>
                  <span class="visually-hidden">Facebook</span>
                </a>
              </li>
              <li class="social-list__item">
                <a href="https://www.instagram.com/siemens.healthineers/" title="Instagram" class="button button--control" target="_blank">
                  <i class="icon-instagram"></i>
                  <span class="visually-hidden">Instagram</span>
                </a>
              </li>
              <li class="social-list__item">
                <a href="https://www.linkedin.com/company/siemens-healthineers" title="LinkedIn" class="button button--control" target="_blank">
                  <i class="icon-linkedin"></i>
                  <span class="visually-hidden">LinkedIn</span>
                </a>
              </li>
              <li class="social-list__item">
                <a href="https://www.youtube.com/siemenshealthineers" title="Youtube" class="button button--control" target="_blank">
                  <i class="icon-youtube"></i>
                  <span class="visually-hidden">Youtube</span>
                </a>
              </li>
            </ul>        </div>
        <div class="col-12 col-md-6 col-lg-4 col-xl-3">
            <h5  class="footer__col-title" id="subscribe">Newsletter</h5>
            <a href="#" title="Subscribe" class="button button--primary" target="_blank">Subscribe</a>        </div>
        <div class="col-12 col-md-6 col-lg-4 col-xl-3">
        </div>
      </div>
    <div class="row">
      <div class="col-12">
          <hr>
          <ul class="legal-links">
            <li class="legal-links__item">Siemens Healthcare GmbH ©2019</li>
            <li class="legal-links__item"><a href="https://www.siemens-healthineers.com/corporate-info" class="legal-links__link">Corporate Information</a></li>
            <li class="legal-links__item"><a href="https://www.siemens-healthineers.com/siemens-website-privacy-policy" class="legal-links__link">Privacy Policy</a></li>
            <li class="legal-links__item"><a href="https://www.siemens-healthineers.com/cookie" class="legal-links__link">Cookie Policy</a></li>
            <li class="legal-links__item"><a href="https://www.siemens-healthineers.com/terms-of-use" class="legal-links__link">Terms of Use</a></li>
          </ul>      </div>
    </div>
  </div>
</footer>