# 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 2018</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 - 2018 Immobilien Scout GmbH</p>
        </div>
    </footer>