Homepage
Component preview opent in nieuw tabbladThere are no notes for this item.
<header>
<div class="dso-logo-bar">
<img src="../../images/omgevingsloket.png" alt="Omgevingsloket" class="logo" />
<div class="dso-tools-bar">
<div class="dropdown open">
<button type="button" id="actie" aria-haspopup="true" aria-expanded="true" class="btn btn-link">
<dso-icon icon="user"></dso-icon><span>O. tester</span>
</button>
<div class="dropdown-menu">
<ul aria-labelledby="actie">
<li>
<a href="#">Mijn Omgevingsloket</a>
</li>
<li>
<a href="#">Mijn profiel</a>
</li>
<li>
<a href="#">Uitloggen</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<nav class="dso-navbar">
<div class="dso-navbar-header">
<button type="button" class="dso-navbar-toggle btn btn-default" aria-expanded="false">
<dso-icon icon="bars"></dso-icon>
<span class="sr-only">Menu</span>
</button>
</div>
<ul class="dso-nav dso-nav-main">
<li class="dso-active">
<a href="#" aria-current="page">
Home
</a>
</li>
<li>
<a href="#">
Vergunningcheck
</a>
</li>
<li>
<a href="#">
Aanvragen
</a>
</li>
<li>
<a href="#">
Regels op de kaart
</a>
</li>
<li>
<a href="#">
Mijn Omgevingsloket
</a>
</li>
</ul>
</nav>
</header>
<main>
<div class="row dso-banner dso-banner-implementation-specific-image" style="background-image: url('../../dummy/images/hands-on-trackpad.jpg')">
<!-- @Developers: Voeg dus geen inline styling toe maar genereer de betreffende styling in een class, zoals bv. `.dso-banner-implementation-specific image`. Inline styling doet het niet goed bij de Webrichtlijnen -->
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
<div class="dso-whitebox-small">
<a href="#">
<span class="dso-whitebox-icon">
<img src="../../dummy/images/aanbouw_schuur_plaatsen.svg" />
</span>
<span class="dso-whitebox-link">
Aanbouw of schuurplaatsen
</span>
</a>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
<div class="dso-whitebox-small">
<a href="#">
<span class="dso-whitebox-icon">
<img src="../../dummy/images/slopen.svg" />
</span>
<span class="dso-whitebox-link">
Slopen van een bouwwerk of gedeelte
</span>
</a>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
<div class="dso-whitebox-small">
<a href="#">
<span class="dso-whitebox-icon">
<img src="../../dummy/images/dakkapel_plaatsen.svg" />
</span>
<span class="dso-whitebox-link">
Dakkapel plaatsen
</span>
</a>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
<div class="dso-whitebox-small">
<a href="#">
<span class="dso-whitebox-icon">
<img src="../../dummy/images/raam_gevel_veranderen.svg" />
</span>
<span class="dso-whitebox-link">
Raam of gevel veranderen
</span>
</a>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
<div class="dso-whitebox-small">
<a href="#">
<span class="dso-whitebox-icon">
<img src="../../dummy/images/boom_kappen.svg" />
</span>
<span class="dso-whitebox-link">
Boom kappen of snoeien
</span>
</a>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
<div class="dso-whitebox-small">
<a href="#">
<span class="dso-whitebox-icon">
<img src="../../dummy/images/overigen.svg" />
</span>
<span class="dso-whitebox-link">
Andere werkzaamheden
</span>
</a>
</div>
</div>
</div>
<h1 class="text-center">Waarmee kunnen we u helpen?</h1>
<div class="row dso-equal-heights dso-featured">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="dso-whitebox">
<div class="dso-whitebox-title">
<h2>Ik wil wat veranderen aan mijn huis, tuin of bedrijf</h2>
</div>
<div class="dso-whitebox-link">
<a href="#" class="btn btn-link">
<dso-icon icon="angle-right"></dso-icon><span>Naar Vergunningcheck</span>
</a>
</div>
<div class="dso-whitebox-icon">
<img src="../../dummy/images/bouwvakkers.png" alt="Indienen" />
</div>
<div class="dso-rich-content">
<p>Doe hier de Vergunningcheck om te kijken of u een vergunning nodig heeft of melding moet doen.</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="dso-whitebox">
<div class="dso-whitebox-title">
<h2>Direct een aanvraag of melding indienen</h2>
</div>
<div class="dso-whitebox-link">
<a href="#" class="btn btn-link">
<dso-icon icon="angle-right"></dso-icon><span>Naar Aanvragen of melding doen</span>
</a>
</div>
<div class="dso-whitebox-icon">
<img src="../../dummy/images/medewerker.png" alt="Indienen" />
</div>
<div class="dso-rich-content">
<p>Weet u al voor welke activiteit(en) u een vergunning moet aanvragen of melding moet doen? Dien hier direct een aanvraag of melding in.</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="dso-whitebox">
<div class="dso-whitebox-title">
<h2>Welke wetten en regels er gelden voor mijn locatie?</h2>
</div>
<div class="dso-whitebox-link">
<a href="#" class="btn btn-link">
<dso-icon icon="angle-right"></dso-icon><span>Naar Regels op de kaart</span>
</a>
</div>
<div class="dso-whitebox-icon">
<img src="../../dummy/images/kaartmensen.png" alt="Indienen" />
</div>
<div class="dso-rich-content">
<p>Weet u al voor welke activiteiten u een vergunning moet aanvragen of een melding moet doen? Dan kunt u de aanvraag of melding direct indienen.</p>
</div>
</div>
</div>
</div>
<div class="row dso-equal-heights">
<div class="col-md-4 col-sm-6 col-xs-12">
<dso-highlight-box border>
<h2>Maatregelen op maat</h2>
<p>Bij Maatregelen op maat kunt u een handig overzicht maken voor alle milieu maatregelen die van toepassing zijn voor uw bedrijf</p>
<a href="#" class="btn btn-link">
<dso-icon icon="chevron-right"></dso-icon>
<span>Naar Maatregelen op maat</span>
</a>
</dso-highlight-box>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<dso-highlight-box border>
<h2>Meer informatie?</h2>
<p>Wilt u meer weten? Vragen over vergunningen en meldingen stelt u aan uw gemeente. Op de site <a href="#" class="extern">Aan de slag met de omgevingswet</a> vindt u meer informatie over de uitvoering van de Omgevingswet.</p>
</dso-highlight-box>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<h2>Huidige Voorzieningen</h2>
<ul>
<li>
<a href="#" class="btn btn-link">
<span>Omgevingsloket.nl</span>
</a>
</li>
<li>
<a href="#" class="btn btn-link">
<span>Aimonline.nl</span>
</a>
</li>
<li>
<a href="#" class="btn btn-link">
<span>Ruimtelijkeplannen.nl</span>
</a>
</li>
</ul>
</div>
</div>
</main>
<footer>
<div class="row">
<div class="col-sm-6 col-md-3">
<h2>Service</h2>
<ul>
<li><a href="#">Contact</a></li>
<li><a href="#">Sitemap</a></li>
<li><a href="#">Help</a></li>
</ul>
</div>
<div class="col-sm-6 col-md-3">
<h2>Over deze site</h2>
<ul>
<li><a href="#">Copyright</a></li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Cookies</a></li>
<li><a href="#">Toegankelijkheid</a></li>
</ul>
</div>
<div class="col-sm-6 col-md-3">
<h2>Volg ons ook op</h2>
<ul>
<li><a href="#">Twitter</a></li>
<li><a href="#">LinkedIn</a></li>
</ul>
</div>
<div class="col-sm-6 col-md-3">
<h2>Link list component</h2>
<ul class="dso-link-list">
<li>
<a href="#" class="extern" target="_blank" rel="noopener noreferrer">Externe link<span class="sr-only">(Opent andere website in nieuw tabblad)</span></a>
</li>
<li>
<a href="#" class="download">Download link</a>
</li>
<li>
<a href="#">Interne link</a>
</li>
</ul>
</div>
</div>
</footer>
<header>
<div class="dso-logo-bar">
{% render '@logo' %}
<div class="dso-tools-bar">
{% render '@dropdown-button', dropdownButton %}
</div>
</div>
{% render '@navigations', menu -%}
</header>
<main>
<div class="row dso-banner dso-banner-implementation-specific-image" style="background-image: url('{{ '/dummy/images/hands-on-trackpad.jpg' | path }}')">
<!-- @Developers: Voeg dus geen inline styling toe maar genereer de betreffende styling in een class, zoals bv. `.dso-banner-implementation-specific image`. Inline styling doet het niet goed bij de Webrichtlijnen -->
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
{% render '@whitebox-small', {source: aanbouw.source, label: aanbouw.label } %}
</div>
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
{% render '@whitebox-small', {source: slopen.source, label: slopen.label } %}
</div>
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
{% render '@whitebox-small', {source: dakkapel.source, label: dakkapel.label } %}
</div>
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
{% render '@whitebox-small', {source: gevel.source, label: gevel.label } %}
</div>
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
{% render '@whitebox-small', {source: kappen.source, label: kappen.label } %}
</div>
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
{% render '@whitebox-small', {source: andere.source, label: andere.label } %}
</div>
</div>
<h1 class="text-center">Waarmee kunnen we u helpen?</h1>
<div class="row dso-equal-heights dso-featured">
<div class="col-md-4 col-sm-6 col-xs-12">
{% render '@whitebox-regular', {title: vergunning.title, description: vergunning.description, linktext: vergunning.linktext, source: vergunning.source} -%}
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
{% render '@whitebox-regular', {title: aanvragen.title, description: aanvragen.description, linktext: aanvragen.linktext , source: aanvragen.source} -%}
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
{% render '@whitebox-regular', {title: kaart.title, description: kaart.description, linktext: kaart.linktext, source: kaart.source} -%}
</div>
</div>
<div class="row dso-equal-heights">
<div class="col-md-4 col-sm-6 col-xs-12">
<dso-highlight-box border>
<h2>Maatregelen op maat</h2>
<p>Bij Maatregelen op maat kunt u een handig overzicht maken voor alle milieu maatregelen die van toepassing zijn voor uw bedrijf</p>
<a href="#" class="btn btn-link">
<dso-icon icon="chevron-right"></dso-icon>
<span>Naar Maatregelen op maat</span>
</a>
</dso-highlight-box>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<dso-highlight-box border>
<h2>Meer informatie?</h2>
<p>Wilt u meer weten? Vragen over vergunningen en meldingen stelt u aan uw gemeente. Op de site <a href="#" class="extern">Aan de slag met de omgevingswet</a> vindt u meer informatie over de uitvoering van de Omgevingswet.</p>
</dso-highlight-box>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<h2>Huidige Voorzieningen</h2>
<ul>
<li>
<a href="#" class="btn btn-link">
<span>Omgevingsloket.nl</span>
</a>
</li>
<li>
<a href="#" class="btn btn-link">
<span>Aimonline.nl</span>
</a>
</li>
<li>
<a href="#" class="btn btn-link">
<span>Ruimtelijkeplannen.nl</span>
</a>
</li>
</ul>
</div>
</div>
</main>
{% render '@footer' %}
menu:
modifier: main
items:
- label: Home
active: true
- label: Vergunningcheck
- label: Aanvragen
- label: Regels op de kaart
- label: Mijn Omgevingsloket
dropdownButton:
id: actie
modifier: link
ariaHasPopup: true
open: true
label: O. tester
icon: user
groups:
- group: null
items:
- label: Mijn Omgevingsloket
- label: Mijn profiel
- label: Uitloggen
breadcrumbs:
crumbs:
- label: Home
url: '#'
aanbouw:
source: /dummy/images/aanbouw_schuur_plaatsen.svg
label: Aanbouw of schuurplaatsen
slopen:
source: /dummy/images/slopen.svg
label: Slopen van een bouwwerk of gedeelte
dakkapel:
source: /dummy/images/dakkapel_plaatsen.svg
label: Dakkapel plaatsen
gevel:
source: /dummy/images/raam_gevel_veranderen.svg
label: Raam of gevel veranderen
kappen:
source: /dummy/images/boom_kappen.svg
label: Boom kappen of snoeien
andere:
source: /dummy/images/overigen.svg
label: Andere werkzaamheden
vergunning:
title: Ik wil wat veranderen aan mijn huis, tuin of bedrijf
description: >-
Doe hier de Vergunningcheck om te kijken of u een vergunning nodig heeft of
melding moet doen.
linktext: Naar Vergunningcheck
source: /dummy/images/bouwvakkers.png
aanvragen:
title: Direct een aanvraag of melding indienen
description: >-
Weet u al voor welke activiteit(en) u een vergunning moet aanvragen of
melding moet doen? Dien hier direct een aanvraag of melding in.
linktext: Naar Aanvragen of melding doen
source: /dummy/images/medewerker.png
kaart:
title: Welke wetten en regels er gelden voor mijn locatie?
description: >-
Weet u al voor welke activiteiten u een vergunning moet aanvragen of een
melding moet doen? Dan kunt u de aanvraag of melding direct indienen.
linktext: Naar Regels op de kaart
source: /dummy/images/kaartmensen.png