Footer

Portal Footer

Für den Portalfooter des Landes Berlin muss das komplette Markup kopiert und eingefügt werden.

Note: The portal footer will be displayed in fullwidth outside this markup example. 
<footer id="footer" class="kiekma">
    <h2 class="aural">Weitere Informationen zu Berlin.de</h2>
    
    <div class="footer__brand">
        <a href="#" title="Zur Startseite von Berlin.de">
            <img src="../../images/logo_berlin_m_negativ.svg" alt="Berlin">
        </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 &amp; Verwaltung</h3>
                <ul>
                                        <li><a href="https://www.berlin.de/rbmskzl/regierende-buergermeisterin/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>
                                        <li><a href="https://www.berlin.de/buergeraktiv/" >Ehrenamt</a></li>
                                    </ul>
            </li>
                        <li>
                <h3 class="heading js-trigger">Aktuelles</h3>
                <ul>
                                        <li><a href="https://www.berlin.de/rbmskzl/politik/sofortprogramm/" >Sofortprogramm des Senats</a></li>
                                        <li><a href="https://www.berlin.de/ukraine/" >Ukraine</a></li>
                                        <li><a href="https://www.berlin.de/energie/" >Energiekrise</a></li>
                                        <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>
                                    </ul>
            </li>
                        <li>
                <h3 class="heading js-trigger">Themen</h3>
                <ul>
                                        <li><a href="https://gemeinsamdigital.berlin.de/" >Gemeinsam Digital</a></li>
                                        <li><a href="https://berlin.de/grundsteuer" >Grundsteuer</a></li>
                                        <li><a href="https://www.berlin.de/sen/uvk/verkehr/mobilitaetswende/verkehr-888873.php" >Mobilitätswende</a></li>
                                        <li><a href="https://www.berlin.de/moderne-verwaltung/" >Moderne Verwaltung</a></li>
                                        <li><a href="https://www.berlin.de/mauer/" >Berliner Mauer</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/adressen/" >BerlinFinder</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>

Content footer

Für eigene Footer Inhalte kann der Content Footer 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 Content Footer muss im Bereich layout-grid__area--contentfooter eingefügt werden.

Note: The content footer is part of page grid area "#layout-grid__area--contentfooter" and will be displayed in fullwidth outside this markup example. 

    <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">Designsystem Berlin.de</h3>
                    <ul>
                        <li><a href="../../patterns/04-pages-changelog/04-pages-changelog.html"  >Changelog</a></li>
                        <li><a href="../../patterns/04-pages-impressum/04-pages-impressum.html"  >Impressum</a></li>
                        <li><a href="../../patterns/04-pages-datenschutz/04-pages-datenschutz.html"  >Datenschutzerklärung</a></li>
                        <li><a href="../../patterns/04-pages-barrierefreiheit/04-pages-barrierefreiheit.html"  >Erklärung zur Barrierefreiheit</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>