<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar navbar-primary">
<ul class="navbar-skiplinks">
<li>
<a href="#suggest-search-query">Skip to search</a>
</li>
<li>
<a href="#section-1 ">Skip to content</a>
</li>
</ul>
<div class="container">
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-controls="navbar-collapse" aria-expanded="false">
<span class="sr-only">Menu</span>
<span class="navbar-toggler-icon" aria-hidden="true"></span>
</button>
<a class="navbar-brand" href="/">
<span class="sr-only">Hoofdpagina</span>
<div class="navbar-brand-container">
<img src="/v6.0.0/img/beeldmerklabelwit.svg" class="logo-labeled" alt="Logo Nijmegen">
<img src="/v6.0.0/img/beeldmerkwit.svg" class="logo" aria-hidden="true" alt="">
</div>
</a>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="navbar-nav mr-auto nijmegen-smooth-scroll">
<li class="nav-item">
<a href="/v6.0.0/components/preview/navbar--default.html#section-1" class="nav-link">One</a>
</li>
<li class="nav-item">
<a href="/v6.0.0/components/preview/navbar--no-search.html#section-2" class="nav-link">Two</a>
</li>
<li class="nav-item">
<a href="#section-3" class="nav-link">Three</a>
</li>
<li class="nav-item">
<a href="#section-4" class="nav-link">Four</a>
</li>
<li class="nav-item">
<a href="https://nijmegen.nl" class="nav-link">External</a>
</li>
</ul>
</div>
<div class="navbar__search">
<button class="navbar__search-button" id="navbar-open-search">
<span class="sr-only">Open zoekveld</span><span class="mdi mdi-magnify" aria-hidden="true"></span>
</button>
<form class="autocomplete autocomplete__form" method="GET" action="https://www.nijmegen.nl" role="search">
<input class="autocomplete__input form-control" type="text" placeholder="Zoeken" id="suggest-search-query" name="q" autocomplete="off" aria-controls="autocomplete-results" aria-autocomplete="both" aria-label="Zoekveld" aria-describedby="autocomplete-help-text" />
<button class="autocomplete__search-button" aria-label="Zoekknop">
<span class="mdi mdi-magnify" aria-hidden="true"></span>
</button>
<button class="autocomplete__clear-button autocomplete__button--hide" aria-label="Invoer wissen" title="Invoer wissen">
<span class="mdi mdi-close" aria-hidden="true"></span>
</button>
<ul id="autocomplete-results" class="autocomplete__result-list" aria-label="Zoekresultaten">
</ul>
<span id="autocomplete-help-text" class="sr-only">
Als er zoekresultaten gevonden zijn kunt u de pijltjes toetsen omhoog en naar beneden gebruiken om een resultaat
te selecteren. Toets enter om te navigeren naar het geselecteerde resultaat. Met de escape toets kunt u de
invoer wissen.</span>
<div id="autocomplete-search-results-announcer" aria-live="assertive" aria-atomic="true" class="sr-only"></div>
</form>
<script id="autocomplete-result-template" type="text/template"></script>
<script id="autocomplete-section-header-template" type="text/template"></script>
<button class="navbar__search-close-button" id="navbar-close-search" aria-label="Sluit zoekveld">
sluiten
</button>
</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="card-read-more 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="card-read-more 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="card-read-more 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="card-read-more 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="card-read-more 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="card-read-more 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 & Herstel, gevonden voorwerpen, fraude, zwerfdieren, rioolverstopping</p>
<p class="card-read-more 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 & Herstel, gevonden voorwerpen, fraude, zwerfdieren, rioolverstopping</p>
<p class="card-read-more 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 & Herstel, gevonden voorwerpen, fraude, zwerfdieren, rioolverstopping</p>
<p class="card-read-more 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="card-read-more 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="card-read-more 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="card-read-more 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">
<button class="btn-floating btn-large btn-floating-primary btn-floating-collapse" aria-label="Hoe kunt u ons bereiken/volgen" aria-controls="follow_us_section" aria-expanded="false">
<span class="mdi mdi-message-processing" aria-hidden="true" title="Hoe kunt u ons bereiken/volgen"></span>
</button>
<ul class="expand-horizontal animated" id="follow_us_section" hidden>
<li>
<a href="tel:+3114024" aria-label="Bel ons">
<span class="mdi mdi-phone" aria-hidden="true" title="Bel ons"></span>
</a>
</li>
<li>
<button aria-label="Vind iets in de buurt">
<span class="mdi mdi-near-me" aria-hidden="true" title="Vind iets in de buurt"></span>
</button>
</li>
<li>
<a href="mailto:gemeente@nijmegen.nl" aria-label="Mail ons">
<span class="mdi mdi-email" aria-hidden="true" title="Mail ons"></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" title="Vind ons op Facebook"></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" title="Volg ons op Twitter"></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>
<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" 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" 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="/v6.0.0/img/beeldmerkwit.svg" height="32" width="25" class="logo-labeled" alt="Logo Gemeente Nijmegen">
Gemeente Nijmegen
</div>
</div>
</footer>
A custom template created for Nijmegen to showcase various components from this library in one overall view.
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.
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.
This element is shown when viewed on devices smaller than a tablet.