Startpagina

Component preview

<header>
    <div class="dso-logo-bar">
        <img src="../../images/omgevingsloket.png" alt="Omgevingsloket" class="logo" />
        <div class="dso-tools-bar">
            <div class="dso-login">
                <a href="" class="dso-tertiary"><dso-icon icon="user"></dso-icon><span>Inloggen</span></a>
            </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/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-6 col-sm-8">
            <dso-highlight-box white>
                <div class="dso-rich-content">
                    <h1>Helpcentrum</h1>
                    <p>Heeft u een vraag over de werking van de Vergunningcheck of over geldende regelgeving? Wij hebben de veelgestelde vragen per thema voor u op een rij gezet.</p>
                </div>
            </dso-highlight-box>
        </div>
    </div>
    <h2>Waarmee kunnen we u helpen?</h2>
    <div class="row">
        <div class="col-md-8">
            <div class="dso-search-bar">
                <div class="dso-search-bar-input">

                    <label for="search-bar--default" class="dso-search-icon">Zoek uw activiteiten</label>

                    <input type="text" id="filter_activiteiten" placeholder="Bijvoorbeeld Hoe moet ik inloggen" />

                    <button type="button">
                        Zoekopdracht legen
                    </button>

                </div>
                <button type="button" class="dso-secondary">
                    Zoeken

                </button>
            </div>

        </div>
    </div>
    <hr>
    <h2>Alle onderwerpen bekijken</h2>
    <div class="row">
        <div class="col-md-4">
            <h3>U wilt weten of u werkzaamheden mag uitvoeren</h3>
            <nav>

                <ul class="dso-link-list">
                    <li>
                        <a href="#">Toestemming nodig</a>

                    </li>
                    <li>
                        <a href="#">Vergunningcheck</a>

                    </li>
                    <li>
                        <a href="#">Maatregelen op maat</a>

                    </li>
                </ul>

            </nav>
        </div>
        <div class="col-md-4">
            <h3>U wilt direct een aanvrag of melding indienen</h3>
            <nav>

                <ul class="dso-link-list">
                    <li>
                        <a href="#">Aanvraag of melding indienen</a>

                    </li>
                    <li>
                        <a href="#">Bijlagen</a>

                    </li>
                    <li>
                        <a href="#">Machtigen</a>

                    </li>
                    <li>
                        <a href="#">Bezwaar en beroep</a>

                    </li>
                </ul>

            </nav>
        </div>
        <div class="col-md-4">
            <h3>U wilt weten welke plannen de Overheid heeft</h3>
            <nav>

                <ul class="dso-link-list">
                    <li>
                        <a href="#">Regels op de kaart</a>

                    </li>
                    <li>
                        <a href="#">Omgevingsdocumenten</a>

                    </li>
                    <li>
                        <a href="#">Terminologie</a>

                    </li>
                </ul>

            </nav>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <h3>U wilt weten hoe het Omgevingsloket werkt</h3>
            <nav>

                <ul class="dso-link-list">
                    <li>
                        <a href="#">Plannen in ontwikkeling</a>

                    </li>
                    <li>
                        <a href="#">Bezwaar maken</a>

                    </li>
                    <li>
                        <a href="#">Notificaties ontvangen</a>

                    </li>
                </ul>

            </nav>
        </div>
        <div class="col-md-4">
            <h3>U wilt direct een aanvrag of melding indienen</h3>
            <nav>

                <ul class="dso-link-list">
                    <li>
                        <a href="#">Inloggen</a>

                    </li>
                    <li>
                        <a href="#">Account</a>

                    </li>
                    <li>
                        <a href="#">Storingen en onderhoud</a>

                    </li>
                </ul>

            </nav>
        </div>
    </div>
    <hr>
    <h2>Overige vragen</h2>
    <div class="row dso-equal-heights">
        <div class="col-md-6">
            <dso-highlight-box white drop-shadow>
                <div class="dso-rich-content">
                    <div class="row">
                        <div class="col-md-4">
                            <img src="../../dummy/images/sneeuwpop.png" alt="Afbeelding van een sneeuwpop">
                        </div>
                        <div class="col-md-8">
                            <h3>Vragen over uw vergunning of melding?</h3>
                            <p>Neem dan contact op met uw gemeente of waterschap.</p>
                        </div>
                    </div>
                </div>
            </dso-highlight-box>
        </div>
        <div class="col-md-6">
            <dso-highlight-box white drop-shadow>
                <div class="dso-rich-content">
                    <div class="row">
                        <div class="col-md-4">
                            <img src="../../dummy/images/sneeuwpop.png" alt="Afbeelding van een sneeuwpop">
                        </div>
                        <div class="col-md-8">
                            <h3>Vragen over de website?</h3>
                            <p>Neem dan contact op met het <a href="#">Informatiepunt</a>
                            </p>

                        </div>
                    </div>
                </div>
            </dso-highlight-box>
        </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>

{% render '@header', {menu: menu, breadcrumbs: []} -%}
<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-6 col-sm-8">
      <dso-highlight-box white>
        <div class="dso-rich-content">
          <h1>Helpcentrum</h1>
          <p>Heeft u een vraag over de werking van de Vergunningcheck of over geldende regelgeving? Wij hebben de veelgestelde vragen per thema voor u op een rij gezet.</p>
        </div>
      </dso-highlight-box>
    </div>
  </div>
  <h2>Waarmee kunnen we u helpen?</h2>
  <div class="row">
    <div class="col-md-8">
      {% render '@search-bar', search %}
    </div>
  </div>
  <hr>
  <h2>Alle onderwerpen bekijken</h2>
  <div class="row">
    <div class="col-md-4">
      <h3>U wilt weten of u werkzaamheden mag uitvoeren</h3>
      <nav>
        {% render '@link-list', links1 %}
      </nav>
    </div>
    <div class="col-md-4">
      <h3>U wilt direct een aanvrag of melding indienen</h3>
      <nav>
        {% render '@link-list', links2 %}
      </nav>
    </div>
    <div class="col-md-4">
      <h3>U wilt weten welke plannen de Overheid heeft</h3>
      <nav>
        {% render '@link-list', links3 %}
      </nav>
    </div>
  </div>
  <div class="row">
    <div class="col-md-4">
      <h3>U wilt weten hoe het Omgevingsloket werkt</h3>
      <nav>
        {% render '@link-list', links4 %}
      </nav>
    </div>
    <div class="col-md-4">
      <h3>U wilt direct een aanvrag of melding indienen</h3>
      <nav>
        {% render '@link-list', links5 %}
      </nav>
    </div>
  </div>
  <hr>
  <h2>Overige vragen</h2>
  <div class="row dso-equal-heights">
    <div class="col-md-6">
      <dso-highlight-box white drop-shadow>
        <div class="dso-rich-content">
          <div class="row">
            <div class="col-md-4">
              {% render '@image' %}
            </div>
            <div class="col-md-8">
              <h3>Vragen over uw vergunning of melding?</h3>
              <p>Neem dan contact op met uw gemeente of waterschap.</p>
            </div>
          </div>
        </div>
      </dso-highlight-box>
    </div>
    <div class="col-md-6">
      <dso-highlight-box white drop-shadow>
        <div class="dso-rich-content">
          <div class="row">
            <div class="col-md-4">
              {% render '@image' %}
            </div>
            <div class="col-md-8">
              <h3>Vragen over de website?</h3>
              <p>Neem dan contact op met het <a href="#">Informatiepunt</a>
              </p>

            </div>
          </div>
        </div>
      </dso-highlight-box>
    </div>
  </div>
</main>
{% render '@footer' %}

search:
  inputType: search-bar
  label: Zoek uw activiteiten
  placeholder: Bijvoorbeeld Hoe moet ik inloggen
  icon: true
  id: filter_activiteiten
  buttonLabel: Zoeken
  clearButton: true
  hiddenLabel: true
links1:
  links:
    - label: Toestemming nodig
      url: '#'
    - label: Vergunningcheck
      url: '#'
    - label: Maatregelen op maat
      url: '#'
links2:
  links:
    - label: Aanvraag of melding indienen
      url: '#'
    - label: Bijlagen
      url: '#'
    - label: Machtigen
      url: '#'
    - label: Bezwaar en beroep
      url: '#'
links3:
  links:
    - label: Regels op de kaart
      url: '#'
    - label: Omgevingsdocumenten
      url: '#'
    - label: Terminologie
      url: '#'
links4:
  links:
    - label: Plannen in ontwikkeling
      url: '#'
    - label: Bezwaar maken
      url: '#'
    - label: Notificaties ontvangen
      url: '#'
links5:
  links:
    - label: Inloggen
      url: '#'
    - label: Account
      url: '#'
    - label: Storingen en onderhoud
      url: '#'