Contentfooter und Landesfooter

Contentfooter Beispiel

Für eigene Footer Inhalte kann der Contentfooter eingesetzt werden. Insbesondere betrifft das die Sitemap der eigenen Seite und die Möglichkeit ein Feedback-Formular zu verwenden. Außerdem gibt es einen Button, der zurück zum Seitenanfang navigiert. Diese Einheiten sind optional, jedoch wird empfohlen den To-top Link immer zu nutzen.

Der Contentfooter muss im Bereich layout-grid__area--contentfooter eingefügt werden.

The Content Footer can be used for the respective site footer content. This especially applies to the sitemap for the respective web page and the feedback form option. There is also a button that navigates back to the top of the page. These units are optional, but we recommend that you always use the to-top link.

The Content Footer must be inserted in the layout-grid__area--contentfooter section.

Note: The content footer is part of page grid area "#layout-grid__area--contentfooter" and will be displayed in fullwidth outside this markup example.
HTML
    <div id="content-footer" role="contentinfo"> 
        <h2 class="aural">Weitere Informationen zu diesem Auftritt</h2>
        <div class="content-footer__brand">
        </div>
        <a class="to-top" href="#top">Zum Seitenanfang</a>
        <nav class="content-footer__links" aria-label="Weiterführende Links">
            <ul class="js-collapse-palm">
                <li class="initial-open">
                    <h3 class="heading js-trigger">Kategorie</h3>
                    <ul>

                        <li><a href="#"  >Beispiellink</a></li>
                        <li><a href="#"  >Beispiellink</a></li>
                        <li><a href="#"  >Beispiellink</a></li>
                    </ul>
                </li>
                <li class="initial-open">
                    <h3 class="heading js-trigger">Kategorie</h3>
                    <ul>

                        <li><a href="#"  >Beispiellink</a></li>
                        <li><a href="#"  >Beispiellink</a></li>
                        <li><a href="#"  >Beispiellink</a></li>
                    </ul>
                </li>
                <li class="initial-open">
                    <h3 class="heading js-trigger">Kategorie</h3>
                    <ul>

                        <li><a href="#"  >Beispiellink</a></li>
                        <li><a href="#"  >Beispiellink</a></li>
                        <li><a href="#"  >Beispiellink</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
    </div>
    <section class="modul-accordion js-accordion feedback-form" id="accordion_feedback-form">
        <h2 class="title title--right js-accordion__heading">
            Feedback
        </h2>  
        <div id="js-feedback-form" class="js-accordion__panel inner">
            <form method="post" action="#">
                <div class="form-group"> 
                    <label for="feed-form-kommentar">Nachricht</label>
                    <textarea class="form-control" id="feed-form-kommentar" rows="7" name="message"></textarea>
                </div> 
                <div class="form-actions">
                    <button class="button" type="submit">Senden</button>
                </div>
            </form>
        </div>
    </section>

Portalfooter (Landesfooter) Beispiel

Hinweis:
Der folgende Portalfooter ist nur ein Beispiel und nicht für den produktiven Einsatz. Bei manueller Integration muss auf ein ständige Aktualität der Inhalte geachtet werden. Für eine automatische Integration besuchen Sie bitte das Support-Wiki. (Der Portalfooter wird außerhalb dieses Beispiels in voller Breite dargestellt.)

Note:
The following portalfooter is just an example and not for production use. When integrating manually, it is essential to ensure that the content is constantly up-to-date. For an automatic integration visit Support-Wiki. (The portal footer will be displayed in fullwidth outside this markup example.)

HTML
<footer id="footer">
    <h2 class="aural">Weitere Informationen zum Auftritt</h2>
    <div class="footer__brand">
        <a href="https://www.berlin.de" title="Zur Startseite von Berlin.de">
            <img title="Zur Startseite von Berlin.de" src="../../images/logo_berlin_m_negativ.svg" alt="Footerlogo">
        </a>
    </div>
    <nav class="footer__links" aria-label="Weitere Bereiche auf Berlin.de">
        <ul class="js-collapse-palm">
                        <li>
                <h3 class="heading js-trigger">Service</h3>
                <ul>
                                        <li><a href="https://service.berlin.de/app/" >Service-App</a></li>
                                        <li><a href="https://service.berlin.de/terminvereinbarung/" >Termin vereinbaren</a></li>
                                        <li><a href="https://service.berlin.de/buergertelefon/" >Bürgertelefon 115</a></li>
                                        <li><a href="https://www.berlin.de/polizei/service/so-erreichen-sie-uns/artikel.532842.php" >Notdienste</a></li>
                                        <li><a href="https://www.berlin.de/ea/" >Gewerbeservice</a></li>
                                    </ul>
            </li>
                        <li>
                <h3 class="heading js-trigger">Behörden</h3>
                <ul>
                                        <li><a href="https://service.berlin.de/behoerden/" >Behörden A-Z</a></li>
                                        <li><a href="https://service.berlin.de/senatsverwaltungen/" >Senatsverwaltungen</a></li>
                                        <li><a href="https://service.berlin.de/bezirksaemter/" >Bezirksämter</a></li>
                                        <li><a href="https://service.berlin.de/standorte/buergeraemter/" >Bürgerämter</a></li>
                                        <li><a href="https://service.berlin.de/jobcenter/" >Jobcenter</a></li>
                                        <li><a href="https://www.berlin.de/einwanderung/" >Einwanderungsamt</a></li>
                                    </ul>
            </li>
                        <li>
                <h3 class="heading js-trigger">Politik & Verwaltung</h3>
                <ul>
                                        <li><a href="https://www.berlin.de/rbmskzl/politik/senat/" >Landesregierung</a></li>
                                        <li><a href="https://www.berlin.de/karriereportal/" >Karriere im Land Berlin</a></li>
                                        <li><a href="https://mein.berlin.de/" >Bürgerbeteiligung</a></li>
                                        <li><a href="https://daten.berlin.de/" >Open Data</a></li>
                                        <li><a href="https://www.berlin.de/vergabeplattform/" >Vergaben</a></li>
                                    </ul>
            </li>
                        <li>
                <h3 class="heading js-trigger">Aktuelles</h3>
                <ul>
                                        <li><a href="https://www.berlin.de/presse/" >Pressemitteilungen</a></li>
                                        <li><a href="https://www.berlin.de/polizei/polizeimeldungen/" >Polizeimeldungen</a></li>
                                        <li><a href="https://www.berlin.de/land/kalender/" >Veranstaltungen</a></li>
                                        <li><a href="https://www.berlin.de/rbmskzl/fokusthemen/" >Fokusthemen</a></li>
                                        <li><a href="https://www.berlin.de/sen/soziales/besondere-lebenssituationen/wohnungslose/notversorgung/kaeltehilfe-1293250.php" >Kältehilfe</a></li>
                                    </ul>
            </li>
                        <li>
                <h3 class="heading js-trigger">Themen</h3>
                <ul>
                                        <li><a href="https://www.berlin.de/moderne-verwaltung/" >Moderne Verwaltung</a></li>
                                        <li><a href="https://www.berlin.de/sen/uvk/mobilitaet-und-verkehr/" >Mobilität</a></li>
                                        <li><a href="https://www.berlin.de/sen/bauen/" >Bauen</a></li>
                                        <li><a href="https://www.berlin.de/sen/wohnen/service/mietspiegel/" >Mietspiegel</a></li>
                                        <li><a href="https://www.berlin.de/sen/bildung/" >Bildung</a></li>
                                    </ul>
            </li>
                        <li>
                <h3 class="heading js-trigger">Weitere Informationen</h3>
                <ul>
                                        <li><a href="https://www.berlin.de/kultur-und-tickets/" >Kultur & Ausgehen</a></li>
                                        <li><a href="https://www.berlin.de/tourismus/" >Tourismus</a></li>
                                        <li><a href="https://www.berlin.de/wirtschaft/" >Wirtschaft</a></li>
                                        <li><a href="https://www.berlin.de/special/" >Stadtleben</a></li>
                                        <li><a href="https://www.berlin.de/stadtplan/" >Stadtplan</a></li>
                                    </ul>
            </li>
                    </ul>
    </nav>
    <div class="footer__claim">
        <p>
            Berlin.de ist ein Angebot des Landes Berlin.
        </p>
    </div>
</footer>