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.
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.
<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 & 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> </section> <div class="content-wrapper page-footer__copyright padding-vertical-l font-center"> <span class="font-white font-semibold">© Copyright 2022</span> Immobilien Scout GmbH </div> </footer>
<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 & 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> </section> <div class="content-wrapper page-footer__copyright padding-vertical-l font-center"> <span class="font-white font-semibold">© Copyright 2022</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.
<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 - 2022 Immobilien Scout GmbH</p> </div> </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 - 2022 Immobilien Scout GmbH</p> </div> </footer>