Nijmegen Component Library
You are viewing version 3 of the library, the latest version is

Footer 

<footer class="page-footer">
    <div class="footer-content">
        <div class="container">
            <div class="row">
                <div class="hidden-md-down col-lg-6">
                    <!-- Space for other content/links -->
                </div>
                <div class="col-md-12 col-lg-6">
                    <div class="row">
                        <div class="hidden-md-down col-lg-5">
                            <h2 class="title">Over deze site</h2>
                            <ul class="link-list">
                                <li><a href="https://www.nijmegen.nl/toegankelijkheid/">Toegankelijkheid</a></li>
                                <li><a href="https://www.nijmegen.nl/privacyverklaring/">Privacyverklaring</a></li>
                                <li><a href="https://www.nijmegen.nl/cookies/">Cookies</a></li>
                                <li><a href="https://www.nijmegen.nl/proclaimer/">Proclaimer</a></li>
                                <li><a href="https://www.nijmegen.nl/sitemap/">Sitemap</a></li>
                            </ul>
                        </div>

                        <div class="col-xs-12 col-md-6 col-lg-7">
                            <h2 class="title">Contactgegevens</h2>
                            <ul class="link-list contact-list">
                                <li>
                                    <span class="mdi mdi-map-marker" aria-hidden="true"></span>
                                    <span class="sr-only">Bekijk onze locatie:</span>
                                    <a href="https://www.google.nl/maps/place/...">
                                        Stadswinkel, Mariënburg 30
                                    </a>
                                </li>
                                <li>
                                    <span class="mdi mdi-phone" aria-hidden="true"></span>
                                    <span class="sr-only">Bel ons:</span>
                                    <a href="tel:14024">
                                        14 024
                                    </a>
                                </li>
                                <li>
                                    <span class="mdi mdi-email" aria-hidden="true"></span>
                                    <span class="sr-only">Mail ons:</span>
                                    <a href="mailto:gemeente@nijmegen.nl">
                                        gemeente@nijmegen.nl
                                    </a>
                                </li>
                                <li>
                                    <span class="mdi mdi-facebook-box" aria-hidden="true"></span>
                                    <span class="sr-only">Vind ons op facebook:</span>
                                    <a href="https://www.facebook.com/gemeentenijmegen">
                                        Gemeente Nijmegen
                                    </a>
                                </li>
                                <li>
                                    <span class="mdi mdi-twitter-box" aria-hidden="true"></span>
                                    <span class="sr-only">Volg ons op Twitter:</span>
                                    <a href="https://twitter.com/gem_nijmegen">
                                        @nijmegen
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer-copyright text-center">
        <div class="container-fluid">
            <img src="/v3/img/beeldmerkwit.svg" height="32" width="25" class="logo-labeled" alt="Logo Gemeente Nijmegen"> Gemeente Nijmegen
        </div>
    </div>
</footer>

A custom component created for Nijmegen.

Accessibility

Where beneficial, an aria-labelledby and/or aria-desbribedby element can be used to provide a better description to assistive technologies.

Using

No additional actions, aside from the markup, are needed to use this component.

Notes

The titles in this component are rendered via h2 elements, every heading (h1 - h6) will work so choose your own heading according the structure of the page.