Nijmegen Component Library
You are viewing version 2 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>
                                    <a href="https://www.google.nl/maps/place/..." aria-labelledby="location-link-label">
                                        Stadswinkel, Mariënburg 30
                                    </a>
                                    <span id="location-link-label" style="display:none">Bekijk onze locatie</span>
                                </li>
                                <li>
                                    <span class="mdi mdi-phone" aria-hidden="true"></span>
                                    <a href="tel:14024" aria-labelledby="phone-link-label">
                                        14 024
                                    </a>
                                    <span id="phone-link-label" style="display:none">Bel ons</span>
                                </li>
                                <li>
                                    <span class="mdi mdi-email" aria-hidden="true"></span>
                                    <a href="mailto:gemeente@nijmegen.nl" aria-labelledby="email-link-label">
                                        gemeente@nijmegen.nl
                                    </a>
                                    <span id="email-link-label" style="display:none">Mail ons</span>
                                </li>
                                <li>
                                    <span class="mdi mdi-facebook-box" aria-hidden="true"></span>
                                    <a href="https://www.facebook.com/gemeentenijmegen" aria-labelledby="facebook-link-label">
                                        Gemeente Nijmegen
                                    </a>
                                    <span id="facebook-link-label" style="display:none">Vind ons op Facebook</span>
                                </li>
                                <li>
                                    <span class="mdi mdi-twitter-box" aria-hidden="true"></span>
                                    <a href="https://twitter.com/gem_nijmegen" aria-labelledby="twitter-link-label">
                                        @nijmegen
                                    </a>
                                    <span id="twitter-link-label" style="display:none">Volg ons op Twitter</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer-copyright text-center">
        <div class="container-fluid">
            <img src="/v2/img/beeldmerkwit.svg" height="32" width="25" class="logo-labeled" alt=""> 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 component may be used with every heading (H1 - H6) level, so you are free to use which heading level suits your use-case.