<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar navbar-primary">
    <div class="container">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-controls="navbar-collapse" aria-expanded="false" aria-label="Schakel navigatie">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="/">
            <div class="navbar-brand-container">
                <img src="https://componenten.nijmegen.nl/v2/img/beeldmerklabelwit.svg" class="logo-labeled" alt="Logo Nijmegen">
                <img src="https://componenten.nijmegen.nl/v2/img/beeldmerkwit.svg" class="logo" alt="Logo Nijmegen">
            </div>
        </a>
        <div class="collapse navbar-collapse" id="navbar-collapse">
            <ul class="navbar-nav mr-auto smooth-scroll">
                <li class="nav-item">
                    <a href="#section-1" class="nav-link">Menu 1</a>
                </li>
                <li class="nav-item">
                    <a href="#section-2" class="nav-link">Menu 2</a>
                </li>
                <li class="nav-item">
                    <a href="#section-3" class="nav-link">Menu 3</a>
                </li>
                <li class="nav-item">
                    <a href="#section-4" class="nav-link">Menu 4</a>
                </li>
            </ul>
            <form action="https://www.nijmegen.nl" class="form-inline ml-auto">
                <label for="oi-query" class="sr-only">Zoeken</label>
                <input class="form-control" id="oi-query" type="text" placeholder="Zoeken" tabindex="1" autocomplete="off">
                <button class="btn-search" tabindex="2" aria-label="Zoek knop"><i class="mdi mdi-magnify" aria-hidden="true"></i></button>
            </form>
        </div>
    </div>
</nav>

<main>
    <div class="container" id="section-1">
        <div class="row">
            <div class="col-lg-4">
                <div class="card card-filename">
                    <div class="card-body">
                        <p class="card-title">Dossiernaam</p>
                        <figure>
                            <img class="content" src="https://mdbootstrap.com/img/Photos/Vertical/mountain1.jpg" alt="Card image cap">
                        </figure>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.
                        </p>
                        <p class="text-right mb-0 text-uppercase"><a href="" aria-label="Lees meer over dossiernaam">Lees meer</a></p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="card card-filename">
                    <div class="card-body">
                        <p class="card-title">Dossiernaam</p>
                        <figure>
                            <img class="content" src="https://mdbootstrap.com/img/Photos/Vertical/mountain1.jpg" alt="Card image cap">
                        </figure>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.
                        </p>
                        <p class="text-right mb-0 text-uppercase"><a href="" aria-label="Lees meer over dossiernaam">Lees meer</a></p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="card card-filename">
                    <div class="card-body">
                        <p class="card-title">Dossiernaam</p>
                        <figure>
                            <img class="content" src="https://mdbootstrap.com/img/Photos/Vertical/mountain1.jpg" alt="Card image cap">
                        </figure>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.
                        </p>
                        <p class="text-right mb-0 text-uppercase"><a href="" aria-label="Lees meer over dossiernaam">Lees meer</a></p>
                    </div>
                </div>
            </div>
        </div>

        <div class="row" id="section-2">
            <div class="col-lg-4">
                <div class="card card-news">
                    <figure>
                        <img class="content" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" alt="Card image cap">
                        <span class="badge badge-default">25 / 05 / 2017</span>
                    </figure>

                    <div class="card-body">
                        <p class="card-title">Nieuws item</p>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <p class="text-right mb-0 text-uppercase"><a href="" aria-label="Lees meer over nieuws item">Lees meer</a></p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="card card-news">
                    <figure>
                        <img class="content" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" alt="Card image cap">
                        <span class="badge badge-default">25 / 05 / 2017</span>
                    </figure>

                    <div class="card-body">
                        <p class="card-title">Nieuws item</p>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <p class="text-right mb-0 text-uppercase"><a href="" aria-label="Lees meer over nieuws item">Lees meer</a></p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="card card-news">
                    <figure>
                        <img class="content" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" alt="Card image cap">
                        <span class="badge badge-default">25 / 05 / 2017</span>
                    </figure>

                    <div class="card-body">
                        <p class="card-title">Nieuws item</p>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <p class="text-right mb-0 text-uppercase"><a href="" aria-label="Lees meer over nieuws item">Lees meer</a></p>
                    </div>
                </div>
            </div>
        </div>

        <div class="row" id="section-3">
            <div class="col-lg-4">
                <div class="card card-services">
                    <div class="card-body">
                        <p><i class="mdi mdi-message" aria-hidden="true"></i></p>
                        <p class="card-title">Melden aan de gemeente</p>
                        <p class="card-text">Meld &amp; Herstel, gevonden voorwerpen, fraude, zwerfdieren, rioolverstopping</p>
                        <p class="text-right mb-0 text-uppercase"><a href="" aria-label="Melden aan de gemeente">Lees meer</a></p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="card card-services">
                    <div class="card-body">
                        <p><i class="mdi mdi-message" aria-hidden="true"></i></p>
                        <p class="card-title">Melden aan de gemeente</p>
                        <p class="card-text">Meld &amp; Herstel, gevonden voorwerpen, fraude, zwerfdieren, rioolverstopping</p>
                        <p class="text-right mb-0 text-uppercase"><a href="" aria-label="Melden aan de gemeente">Lees meer</a></p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="card card-services">
                    <div class="card-body">
                        <p><i class="mdi mdi-message" aria-hidden="true"></i></p>
                        <p class="card-title">Melden aan de gemeente</p>
                        <p class="card-text">Meld &amp; Herstel, gevonden voorwerpen, fraude, zwerfdieren, rioolverstopping</p>
                        <p class="text-right mb-0 text-uppercase"><a href="" aria-label="Melden aan de gemeente">Lees meer</a></p>
                    </div>
                </div>
            </div>
        </div>

        <div class="row" id="section-4">
            <div class="col-lg-4">
                <div class="card card-services">
                    <div class="card-body">
                        <p class="card-title">Parkeren, verkeer en vervoer</p>
                        <p class="card-text">Parkeren, vergunningen, fietsenstallingen, wegwerkzaamheden, elektrisch rijden</p>
                        <p class="text-right mb-0 text-uppercase"><a href="" aria-label="Parkeren, verkeer en vervoer">Lees meer</a></p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="card card-services">
                    <div class="card-body">
                        <p class="card-title">Parkeren, verkeer en vervoer</p>
                        <p class="card-text">Parkeren, vergunningen, fietsenstallingen, wegwerkzaamheden, elektrisch rijden</p>
                        <p class="text-right mb-0 text-uppercase"><a href="" aria-label="Parkeren, verkeer en vervoer">Lees meer</a></p>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="card card-services">
                    <div class="card-body">
                        <p class="card-title">Parkeren, verkeer en vervoer</p>
                        <p class="card-text">Parkeren, vergunningen, fietsenstallingen, wegwerkzaamheden, elektrisch rijden</p>
                        <p class="text-right mb-0 text-uppercase"><a href="" aria-label="Parkeren, verkeer en vervoer">Lees meer</a></p>
                    </div>
                </div>
            </div>
        </div>

        <div class="row d-md-none">
            <div class="col-12">
                <div class="horizontal-collapse">
                    <a class="btn-floating btn-large btn-floating-primary btn-floating-collapse" aria-label="Hoe kunt u ons bereiken/volgen">
                        <span class="mdi mdi-message-processing" aria-hidden="true"></span>
                    </a>
                    <ul class="expand-horizontal animated">
                        <li>
                            <a href="tel:+3114024" aria-label="Bel ons">
                                <span class="mdi mdi-phone" aria-hidden="true"></span>
                            </a>
                        </li>
                        <li>
                            <button aria-label="Vind iets in de buurt">
                                <span class="mdi mdi-near-me" aria-hidden="true"></span>
                            </button>
                        </li>
                        <li>
                            <a href="mailto:gemeente@nijmegen.nl" aria-label="Mail ons">
                                <span class="mdi mdi-email" aria-hidden="true"></span>
                            </a>
                        </li>
                        <li>
                            <a href="https://www.facebook.com/gemeentenijmegen" aria-label="Vind ons op Facebook">
                                <span class="mdi mdi-facebook-box" aria-hidden="true"></span>
                            </a>
                        </li>
                        <li>
                            <a href="https://twitter.com/gem_nijmegen" aria-label="Volg ons op Twitter">
                                <span class="mdi mdi-twitter-box" aria-hidden="true"></span>
                            </a>
                        </li>
                        <li class="btn-floating-wrapper"></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</main>

<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="https://componenten.nijmegen.nl/v2/img/beeldmerkwit.svg" height="32" width="25" class="logo-labeled" alt=""> Gemeente Nijmegen
        </div>
    </div>
</footer>

Default Template

A custom template created for Nijmegen to showcase various components from this library in one overall view.

Using

Smooth scroll

By adding the smooth-scroll class to the list container in the navbar component, you’re able to use the Smooth Scroll interaction as documented in MDB (https://mdbootstrap.com/javascript/smooth-scroll/#smooth-scroll)

<ul class="navbar-nav mr-auto smooth-scroll">

Aside from this addition, the anchor(s) in the list container should have an href like #section-1 whereas an element with an id="section-1" should be present in the page thus allowing the Smooth Scroll interaction to scroll nicely to the corresponding section.

Displaying the cards in a grid

Let’s say you want to create a grid type of listing with multiple cards in it.
On extra small, small and medium the items are stacked underneath eachother and on a large view and wider (≥ 992px, see MDB Grid options) you will see 3 items next to eachother per row.

Button horizontal collapse

This element is shown when viewed on devices smaller than a tablet.

Notes

  • Used components: see the “References” in the component library info tab