Einführung¶ ↑
Um die Anatomie des Telekom Footers zu versthen ist es wichtig zu wissen, dass den Telekom Footer nicht als “eine Komponente” gibt.
Er besteht aus mehreren Einzel-Komponenten.
Übersicht¶ ↑
Es sind zwei Versionen des Footers definiert, eine kurze Version und eine lange mit einem vollständigen Menü.
Footer kurz¶ ↑
Die kurze Version besteht aus drei sichtbaren .row .brand-footer-bar
Elementen für die Icons von sozialen Netzwerken, der Trennlinie und dem Footer Menü. Abhängig vom 'viewport' werden die Trennlinien an unterschiedlichen Stellen angezeigt. Dafür wurden unter anderem Helper-Klassen eingesetzt.
</div> </div>
{% highlight html %} <footer class=“brand-footer”> <div class=“container-fixed”> <div class=“row brand-footer-bar brand-footer-social”> <div class=“col-l-12”> <ul class=“nav nav-inline text-center”> <li> <a href=“#”> <img src=“images/facebook.svg” alt=“Facebook”> <span class=“sr-only”>Facebook</span> </a> </li> <li> <a href=“#”> <img src=“images/twitter.svg” alt=“Twitter”> <span class=“sr-only”>Twitter</span> </a> </li> <li> <a href=“#”> <img src=“images/youtube-play.svg” alt=“Youtube”> <span class=“sr-only”>Youtube</span> </a> </li> </ul> </div> </div> <div class=“row brand-footer-bar hidden-xl hidden-l hidden-m”> <div class=“col-l-3 col-m-2 col-s-12”> <div class=“brand-logo”> <a href=“#”> <img src=“images/deutsche-telekom-logo.svg” alt=“Telekom Logo”> <span class=“sr-only”>Telekom Logo</span> </a> </div> </div> </div> </div> <div class=“brand-footer-separator hidden-xl hidden-l hidden-m”></div> <div class=“container-fixed”> <div class=“row hidden-s hidden-xs”> <div class=“col-l-12”> <div class=“brand-footer-separator”> </div> </div> </div> <div class=“row brand-footer-bar”> <div class=“col-l-3 col-m-2 hidden-s hidden-xs”> <div class=“brand-logo”> <a href=“#”> <img src=“images/deutsche-telekom-logo.svg” alt=“Telekom Logo”> <span class=“sr-only”>Telekom Logo</span> </a> </div> </div> <div class=“col-m-12 hidden-xl hidden-l hidden-m text-center text-muted”> <div class=“brand-footer-bar-text”>© 2016 Deutsche Telekom AG</div> </div> <div class=“col-l-6 col-m-8 col-s-12”> <ul class=“nav brand-footer-nav brand-footer-nav-muted text-center”> <li><a href=“#”>Imprint</a></li> <li><a href=“#”>Contact</a></li> <li><a href=“#”>FAQ</a></li> <li><a href=“#”>Privacy Policy</a></li> <li><a href=“#”>Disclaimer</a></li> </ul> </div> <div class=“col-l-3 col-m-12 hidden-s hidden-xs text-l-right text-m-center text-muted”> <div class=“brand-footer-bar-text”>© 2016 Deutsche Telekom AG</div> </div> </div> </div> </footer> {% endhighlight %}
Footer Lang
Die lange Version hat ein Inline-Menü für Settings sowie eigenes vollständiges Menü. Logo und Claim sind wie die Meta-Navigation und das Copyright in jeweils einer eigenen `.row` angeordnet.
{% highlight html %} <footer class=“brand-footer”> <div class=“container-fixed”> <div class=“row brand-footer-bar brand-footer-bar-condensed”> <div class=“col-l-6 col-s-12”> <ul class=“nav brand-footer-nav text-l-left text-s-center”> <li class=“active”><a href=“#”>Privatkunden</a></li> <li><a href=“#”>Geschäftskunden</a></li> </ul> </div> <div class=“col-l-6 col-s-12”> <ul class=“nav brand-footer-nav text-l-right text-s-center”> <li class=“active”><a href=“#”>Deutsch</a></li> <li><a href=“#”>English</a></li> </ul> </div> </div> <div class=“row brand-footer-bar”> <div class=“col-l-3 col-s-12”> <div class=“brand-footer-nav-caption”>Lorem Ipsum Dolor</div> <div class=“content-list brand-footer-content-list”> <a class=“content-list-item” href=“#”>At vero eos</a> <a class=“content-list-item” href=“#”>Dolor sit amet</a> <a class=“content-list-item” href=“#”>Conseteur sadipiscing</a> <a class=“content-list-item” href=“#”>Elitir eirmod</a> <a class=“content-list-item” href=“#”>Dolore magna</a> </div> </div> <div class=“col-l-3 col-s-12”> <div class=“brand-footer-nav-caption”>Lorem Ipsum Dolor</div> <div class=“content-list brand-footer-content-list”> <a class=“content-list-item” href=“#”>At vero eos</a> <a class=“content-list-item” href=“#”>Dolor sit amet</a> <a class=“content-list-item” href=“#”>Conseteur sadipiscing</a> <a class=“content-list-item” href=“#”>Elitir eirmod</a> </div> </div> <div class=“col-l-3 col-s-12”> <div class=“brand-footer-nav-caption”>Lorem Ipsum Dolor</div> <div class=“content-list brand-footer-content-list”> <a class=“content-list-item” href=“#”>At vero eos</a> <a class=“content-list-item” href=“#”>Dolor sit amet</a> <a class=“content-list-item” href=“#”>Conseteur sadipiscing</a> <a class=“content-list-item” href=“#”>Elitir eirmod</a> <a class=“content-list-item” href=“#”>Dolore magna</a> </div> </div> <div class=“col-l-3 col-s-12”> <div class=“brand-footer-nav-caption”>Social Media</div> <div class=“content-list brand-footer-content-list”> <a class=“content-list-item” href=“#”> <img src=“images/facebook.svg” alt=“Facebook”> facebook </a> <a class=“content-list-item” href=“#”> <img src=“images/twitter.svg” alt=“Twitter”> twitter </a> <a class=“content-list-item” href=“#”> <img src=“images/youtube-play.svg” alt=“Youtube”> youtube </a> </div> </div> </div> <div class=“row brand-footer-bar brand-footer-bar-brandbar”> <div class=“col-l-12”> <a href=“#” class=“brand-logo pull-left”> <img src=“images/deutsche-telekom-logo.svg” alt=“Telekom Logo”> <span class=“sr-only”>Telekom Logo</span> </a> <div class=“brand-claim pull-right”> <img src=“images/brand-claim.svg” alt=“Brand Claim”> <span class=“sr-only”>Brand Claim</span> </div> </div> </div> <div class=“row hidden-s hidden-xs”> <div class=“col-l-12”> <div class=“brand-footer-separator”></div> </div> </div> </div> <div class=“brand-footer-separator hidden-xl hidden-l hidden-m”></div> <div class=“container-fixed”> <div class=“row brand-footer-bar”> <div class=“col-l-4 col-s-12 text-muted text-s-center”> <div class=“brand-footer-bar-text”>© 2016 Deutsche Telekom AG</div> </div> <div class=“col-l-8 col-s-12”> <ul class=“nav brand-footer-nav brand-footer-nav-muted text-l-right text-s-center”> <li><a href=“#”>Imprint</a></li> <li><a href=“#”>Contact</a></li> <li><a href=“#”>FAQ</a></li> <li><a href=“#”>Privacy Policy</a></li> <li><a href=“#”>Disclaimer</a></li> </ul> </div> </div> </div> </footer> {% endhighlight %}