Homepage
Component preview opent in nieuw tabbladThere are no notes for this item.
<header>
<div class="dso-logo-bar">
<img src="../../logos/omgevingsloket.svg" alt="Omgevingsloket" class="logo" />
<div class="dso-tools-bar">
<div class="dso-dropdown-menu">
<button type="button" id="actie" aria-haspopup="menu" aria-expanded="false" class="dso-tertiary">
<span>J. Janssen</span></button>
</div>
</div>
</div>
<nav class="dso-navbar">
<div class="dso-navbar-header">
<button type="button" class="dso-navbar-toggle dso-secondary" 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/hero3.png')">
<!-- @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-6 col-md-9 col-sm-12 col-xs-12">
<div class="dso-highlight-box dso-white dso-drop-shadow">
<div class="dso-rich-content">
<h1>Welkom op het Omgevingsloket</h1>
<p>Een vergunning aanvragen of melding doen, bijvoorbeeld voor een nieuwe dakkapel, een nieuw bedrijfspand of een activiteit op of aan een dijk. Het kan met het nieuwe Omgevingsloket.</p>
</div>
</div>
</div>
</div>
<div class="row dso-featured dso-equal-heights">
<div class="col-xs-12">
<div class="dso-highlight-box dso-white dso-border">
<div class="row">
<div class="col-md-5 col-md-push-7">
<div class="dso-rich-content">
<h2>Check of u een vergunning nodig heeft</h2>
<p>Wilt u iets veranderen aan het huis, tuin of bedrijf?</p>
<p> Doe hier de vergunningcheck om te kijken of u een vergunning nodig heeft of een melding moet doen.</p>
<a href="#" class="dso-secondary"><span>Vergunningcheck</span><dso-icon icon="chevron-right"></dso-icon></a>
</div>
</div>
<div class="col-md-7 col-md-pull-5">
<div class="dso-rich-content">
<h3>Meest gekozen werkzaamheden</h3>
<br>
</div>
<div class="dso-tile-grid">
<div class="dso-tile dso-theme">
<a href="#">
<span class="dso-tile-icon">
<img src="../../graphics/aanbouw_schuur_plaatsen.svg" alt="" />
</span>
<span class="dso-tile-link">Aanbouw of schuur plaatsen</span>
</a>
</div>
<div class="dso-tile dso-theme">
<a href="#">
<span class="dso-tile-icon">
<img src="../../graphics/slopen.svg" alt="" />
</span>
<span class="dso-tile-link">
Sloopwerkzaamheden
</span>
</a>
</div>
<div class="dso-tile dso-theme">
<a href="#">
<span class="dso-tile-icon">
<img src="../../graphics/dakkapel_plaatsen.svg" alt="" />
</span>
<span class="dso-tile-link">
Dakkapel plaatsen
</span>
</a>
</div>
<div class="dso-tile dso-theme">
<a href="#">
<span class="dso-tile-icon">
<img src="../../graphics/boom_kappen.svg" alt="" />
</span>
<span class="dso-tile-link">
Erf afscheiding plaatsen
</span>
</a>
</div>
<div class="dso-tile dso-theme">
<a href="#">
<span class="dso-tile-icon">
<img src="../../graphics/raam_gevel_veranderen.svg" alt="" />
</span>
<span class="dso-tile-link">
Raam of gevel veranderen
</span>
</a>
</div>
<div class="dso-tile dso-theme">
<a href="#">
<span class="dso-tile-icon">
<img src="../../graphics/erfafscheiding_plaatsen.svg" alt="" />
</span>
<span class="dso-tile-link">
Boom kappen of snoeien
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="dso-highlight-box dso-white dso-drop-shadow">
<div class="dso-rich-content">
<img src="../../dummy/images/hp7.png" class="img-responsive" aria-hidden="true">
<h2>Vergunning aanvragen of melding doen</h2>
<p>Weet u al voor welke activiteiten u een vergunning moet aanvragen of een melding moet doen? Dan kan u een aanvraag of melding starten.</p>
<a href="#" class="dso-secondary"><span>Aanvragen</span><dso-icon icon="chevron-right"></dso-icon></a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="dso-highlight-box dso-white dso-drop-shadow">
<div class="dso-rich-content">
<img src="../../dummy/images/hp5.png" class="img-responsive" aria-hidden="true">
<h2>Bekijk de regels op de kaart op uw locatie</h2>
<p>In Regels op de kaart vindt u de regels van alle overheden bij elkaar. U kunt ook plannen van de overheid bekijken voor de toekomst </p>
<a href="#" class="dso-secondary"><span>Regels op de kaart</span><dso-icon icon="chevron-right"></dso-icon></a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="dso-highlight-box dso-white dso-drop-shadow">
<div class="dso-rich-content">
<img src="../../dummy/images/hp6.png" class="img-responsive" aria-hidden="true">
<h2>Maatregelen voor bedrijven en burgers</h2>
<p>Welke algemene regels gelden er voor uw bedrijf, huis of project? Krijg een overzicht van de maatregelen waarmee u aan de regels kunt voldoen.</p>
<a href="#" class="dso-secondary"><span>Maatregelen op maat</span><dso-icon icon="chevron-right"></dso-icon></a>
</div>
</div>
</div>
</div>
<div class="row dso-equal-heights">
<div class="col-md-4 col-sm-6">
<div class="dso-highlight-box dso-border">
<div class="dso-rich-content">
<h3>Heeft u een vraag?</h3>
<p>Het snelste antwoord op uw vragen vind u in ons Helpcentrum. Wij hebben de veelgestelde vragen per thema voor u op een rij gezet.</p>
<a href="#" class="dso-tertiary"><span>Helpcentrum</span><dso-icon icon="chevron-right"></dso-icon></a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="dso-highlight-box dso-border">
<div class="dso-rich-content">
<h3>Huidige dienstverlening</h3>
<ul class="dso-link-list">
<li>
<a href="https://www.omgevingsloket.nl">Omgevingsloket.nl</a>
</li>
<li>
<a href="https://www.aimonline.nl">Aimonline.nl</a>
</li>
<li>
<a href="https://www.ruimtelijkeplannen.nl">Ruimtelijkeplannen.nl</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</main>
<footer>
<div class="row">
<div class="col-sm-6 col-md-3">
<h2>Basic link</h2>
<ul class="dso-link-list">
<li><a href="#">Normale link</a></li>
<li><a href="#">Test link</a></li>
</ul>
</div>
<div class="col-sm-6 col-md-3">
<h2>Externe links</h2>
<ul class="dso-link-list">
<li><a href="#" class="extern">Externe link</a></li>
<li><a href="#" class="extern">Extra externe link</a></li>
<li><a href="#" class="extern">Laatste externe link</a></li>
</ul>
</div>
<div class="col-sm-6 col-md-3">
<h2>Tekst paragraaf</h2>
<p>
Loop goed na welke inhoud essentieel is voor de footer. Creeër met rows en cols de gewenste indeling van uw footer.
</p>
</div>
<div class="col-sm-6 col-md-3">
<h2>Combinatie links en tekst</h2>
<p>
Tekst kan worden gevolgd door verscheidene <a href="#">links</a>.
</p>
<ul class="dso-link-list">
<li><a href="#">Combinatie link</a></li>
<li><a href="#">Combinatie link 2</a></li>
</ul>
</div>
</div>
</footer>
<header>
<div class="dso-logo-bar">
<img src="../../logos/omgevingsloket.svg" alt="Omgevingsloket" class="logo"/>
<div class="dso-tools-bar">
<div class="dso-dropdown-menu">
<button type="button" id="actie" aria-haspopup="menu" aria-expanded="false" class="dso-tertiary">
<span>J. Janssen</span></button>
</div>
</div>
</div>
{% render '@navigations', menu -%}
</header>
<main>
<div class="row dso-banner dso-banner-implementation-specific-image" style="background-image: url('{{ '/dummy/images/hero3.png' | 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-6 col-md-9 col-sm-12 col-xs-12">
<div class="dso-highlight-box dso-white dso-drop-shadow">
<div class="dso-rich-content">
<h1>Welkom op het Omgevingsloket</h1>
<p>Een vergunning aanvragen of melding doen, bijvoorbeeld voor een nieuwe dakkapel, een nieuw bedrijfspand of een activiteit op of aan een dijk. Het kan met het nieuwe Omgevingsloket.</p>
</div>
</div>
</div>
</div>
<div class="row dso-featured dso-equal-heights">
<div class="col-xs-12">
<div class="dso-highlight-box dso-white dso-border">
<div class="row">
<div class="col-md-5 col-md-push-7">
<div class="dso-rich-content">
<h2>Check of u een vergunning nodig heeft</h2>
<p>Wilt u iets veranderen aan het huis, tuin of bedrijf?</p>
<p> Doe hier de vergunningcheck om te kijken of u een vergunning nodig heeft of een melding moet doen.</p>
{% render '@anchor', {url: '#', label: 'Vergunningcheck', modifier: 'dso-secondary', iconAfter: 'chevron-right'} -%}
</div>
</div>
<div class="col-md-7 col-md-pull-5">
<div class="dso-rich-content">
<h3>Meest gekozen werkzaamheden</h3>
<br>
</div>
<div class="dso-tile-grid">
<div class="dso-tile dso-theme">
<a href="#">
<span class="dso-tile-icon">
<img src="../../graphics/aanbouw_schuur_plaatsen.svg" alt=""/>
</span>
<span class="dso-tile-link">Aanbouw of schuur plaatsen</span>
</a>
</div>
<div class="dso-tile dso-theme">
<a href="#">
<span class="dso-tile-icon">
<img src="../../graphics/slopen.svg" alt=""/>
</span>
<span class="dso-tile-link">
Sloopwerkzaamheden
</span>
</a>
</div>
<div class="dso-tile dso-theme">
<a href="#">
<span class="dso-tile-icon">
<img src="../../graphics/dakkapel_plaatsen.svg" alt=""/>
</span>
<span class="dso-tile-link">
Dakkapel plaatsen
</span>
</a>
</div>
<div class="dso-tile dso-theme">
<a href="#">
<span class="dso-tile-icon">
<img src="../../graphics/boom_kappen.svg" alt=""/>
</span>
<span class="dso-tile-link">
Erf afscheiding plaatsen
</span>
</a>
</div>
<div class="dso-tile dso-theme">
<a href="#">
<span class="dso-tile-icon">
<img src="../../graphics/raam_gevel_veranderen.svg" alt=""/>
</span>
<span class="dso-tile-link">
Raam of gevel veranderen
</span>
</a>
</div>
<div class="dso-tile dso-theme">
<a href="#">
<span class="dso-tile-icon">
<img src="../../graphics/erfafscheiding_plaatsen.svg" alt=""/>
</span>
<span class="dso-tile-link">
Boom kappen of snoeien
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="dso-highlight-box dso-white dso-drop-shadow">
<div class="dso-rich-content">
<img src="../../dummy/images/hp7.png" class="img-responsive" aria-hidden="true">
<h2>Vergunning aanvragen of melding doen</h2>
<p>Weet u al voor welke activiteiten u een vergunning moet aanvragen of een melding moet doen? Dan kan u een aanvraag of melding starten.</p>
{% render '@anchor', {url: '#', label: 'Aanvragen', modifier: 'dso-secondary', iconAfter: 'chevron-right'} -%}
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="dso-highlight-box dso-white dso-drop-shadow">
<div class="dso-rich-content">
<img src="../../dummy/images/hp5.png" class="img-responsive" aria-hidden="true">
<h2>Bekijk de regels op de kaart op uw locatie</h2>
<p>In Regels op de kaart vindt u de regels van alle overheden bij elkaar. U kunt ook plannen van de overheid bekijken voor de toekomst </p>
{% render '@anchor', {url: '#', label: 'Regels op de kaart', modifier: 'dso-secondary', iconAfter: 'chevron-right'} -%}
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="dso-highlight-box dso-white dso-drop-shadow">
<div class="dso-rich-content">
<img src="../../dummy/images/hp6.png" class="img-responsive" aria-hidden="true">
<h2>Maatregelen voor bedrijven en burgers</h2>
<p>Welke algemene regels gelden er voor uw bedrijf, huis of project? Krijg een overzicht van de maatregelen waarmee u aan de regels kunt voldoen.</p>
{% render '@anchor', {url: '#', label: 'Maatregelen op maat', modifier: 'dso-secondary', iconAfter: 'chevron-right'} -%}
</div>
</div>
</div>
</div>
<div class="row dso-equal-heights">
<div class="col-md-4 col-sm-6">
<div class="dso-highlight-box dso-border">
<div class="dso-rich-content">
<h3>Heeft u een vraag?</h3>
<p>Het snelste antwoord op uw vragen vind u in ons Helpcentrum. Wij hebben de veelgestelde vragen per thema voor u op een rij gezet.</p>
{% render '@anchor', {url: '#', label: 'Helpcentrum', modifier: 'dso-tertiary', iconAfter: 'chevron-right'} -%}
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="dso-highlight-box dso-border">
<div class="dso-rich-content">
<h3>Huidige dienstverlening</h3>
<ul class="dso-link-list">
<li>
<a href="https://www.omgevingsloket.nl">Omgevingsloket.nl</a>
</li>
<li>
<a href="https://www.aimonline.nl">Aimonline.nl</a>
</li>
<li>
<a href="https://www.ruimtelijkeplannen.nl">Ruimtelijkeplannen.nl</a>
</li>
</ul>
</div>
</div>
</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