Page Footer

This section explains how the global ImmobilienScout24 page footer is set up.

Note: Be sure to implement the footer markup via a content snippet from the CMS to make sure that you receive important content updates automatically.

  1. Full Footer
  2. Reduced Footer

Full Footer

The basic structure of the footer is defined by the page-footer and page-footer__copyright classes. Everything else is made up of regular building blocks (the grid, link icons, font sizes, etc.).

The page-footer__accessibility class hides content from view for aesthetical reasons but keeps it accessible to screen readers and the like.

Full footer (Image URLs will differ depending on location.) 
<footer class="page-footer font-s">
  <section class="content-wrapper">
    <h4 class="page-footer__accessibility">Site Information</h4>
    <div class="padding-top-xl padding-bottom-l">
      <div class="grid gutter">
        <div class="grid-item palm-one-whole lap-one-half desk-one-half">
          <section>
            <h5 class="font-s font-light font-lightgray">ImmobilienScout24</h5>
            <div class="grid gutter">
              <div class="grid-item one-third">
                <ul class="list-spacing-xs icon-arrow">
                  <li><a href="#">Über uns</a></li>
                  <li><a href="#">Kontakt</a></li>
                  <li><a href="#">Hilfe</a></li>
                  <li><a href="#">Karriere</a></li>
                  <li><a href="#">Sitemap</a></li>
                  <li><a href="#">Developer</a></li>
                  <li><a href="#">Presseservice</a></li>
                </ul>
              </div>
              <div class="grid-item two-thirds">
                <ul class="list-spacing-xs icon-arrow">
                  <li><a href="#">Impressum</a></li>
                  <li><a href="#">AGB &amp; Rechtliche Hinweise</a></li>
                  <li><a href="#">Datenschutz</a></li>
                  <li><a href="#">Nutzungsbasierte Online-Werbung</a></li>
                  <li><a href="#">Datenschutz-Kodex für Geodatendienste</a></li>
                </ul>
              </div>
            </div>
          </section>
        </div>
        <div class="grid-item palm-one-half lap-one-fourth desk-one-fourth">
          <section>
            <h5 class="font-s font-light font-lightgray">International</h5>
            <ul class="list-spacing-xs icon-arrow">
              <li><a href="#">www.immobilienscout24.at</a></li>
              <li><a href="#">www.immoscout24.ch</a></li>
              <li><a href="#">propertyguru.com.sg</a></li>
              <li><a href="#">propertyguru.com.my</a></li>
              <li><a href="#">rumah.com</a></li>
              <li><a href="#">ddproperty.com</a></li>
              <li><a href="#">You is now – Lab</a></li>
            </ul>
          </section>
        </div>
        <div class="grid-item palm-one-half lap-one-fourth desk-one-fourth">
          <section>
            <h5 class="font-s font-light font-lightgray">Social Network</h5>
            <ul class="list-spacing-xs icon-arrow margin-bottom">
              <li><a href="#">News</a></li>
              <li><a href="#">Werbung</a></li>
              <li><a href="#">Blog</a></li>
              <li><a href="#">Nachbarschaft</a></li>
            </ul>
            <h6 class="font-s font-light font-lightgray">Folgen Sie uns</h6>
            <a href="#" target="_blank"><span class="fa fa-twitter-square fa-3x" style="color:#55acee;"></span></a>
            <a href="#" target="_blank"><span class="fa fa-rss-square fa-3x" style="color:#f7a42c;"></span></a>
            <a href="#" target="_blank"><span class="fa fa-facebook-square fa-3x" style="color:#3b5998;"></span></a>
            <a href="#" target="_blank"><span class="fa fa-youtube-square fa-3x" style="color:#d33f2a;"></span></a>
          </section>
        </div>
      </div>
      <div class="grid gutter-s">
        <div class="grid-item lap-one-third desk-one-third">
          <section>
            <div class="float-left margin-top-xs margin-right-s">
              <img src="../../img/footer/logo_autoscout_137x66.png" width="60" />
            </div>
            <p class="font-line-s">
              Ob Luxuskarosse, Elektroauto, Motorrad oder Nutzfahrzeug.
            </p>
          </section>
        </div>
        <div class="grid-item lap-one-third desk-one-third">
          <section>
            <div class="float-left margin-top-xs margin-right-s">
              <img src="../../img/footer/logo_financescout_137x66.png" width="60" />
            </div>
            <p class="font-line-s">
              Welche Versicherungen brauche ich und gibt es die passenden Angebote?
            </p>
          </section>
        </div>
        <div class="grid-item lap-one-third desk-one-third">
          <section>
            <div class="float-left margin-top-xs margin-right-s">
              <img src="../../img/footer/logo_scout_137x66.png" width="60" />
            </div>
            <p class="font-line-s">
              Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
            </p>
          </section>
        </div>
      </div>
    </div>
  </section>
  <div class="content-wrapper page-footer__copyright padding-vertical-l font-center">
    <span class="font-white font-semibold">© Copyright 2021</span> Immobilien Scout GmbH
  </div>
</footer>

Reduced Footer

There is also a reduced version of the global footer for pages where the complete footer would distract from the main content.

Reduced footer
<footer class="main-footer">
    <h6>Seiteninformationen</h6>
    <ul>
        <li><a href="#">Kontakt</a></li>
        <li><a href="#">Hilfe</a></li>
        <li><a href="#">Impressum</a></li>
        <li><a href="#"><abbr title="Allgemeine Geschäftsbedingungen">AGB</abbr></a></li>
        <li><a href="#">Rechtliche Hinweise</a></li>
        <li><a href="#">Datenschutz</a></li>
    </ul>
    <div class="build-information">
        <p>© 1999 - 2021 Immobilien Scout GmbH</p>
    </div>
</footer>