Homepage

Component preview opent in nieuw tabblad

There 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">
                <dso-icon icon="bars"></dso-icon>
                <span class="sr-only">Ga naar menu</span>
            </button>
        </div>

        <ul class="dso-nav dso-nav-main">
            <li class="dso-active">
                <a href="#">
                    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>
</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