Zoekresultaten

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="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="dso-button-row">
        <button type="button" class="dso-tertiary"><dso-icon icon="chevron-left"></dso-icon><span>Terug naar helpcentrum</span></button>

    </div>
    <h1>Zoekresultaat voor โ€˜Situatieschetsโ€™</h1>
    <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" value="Situatieschets" />

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

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

                </button>
            </div>

            <hr>
            <div class="dso-context-wrapper">
                <span class="dso-context-label" aria-hidden="true">
                    <h3>2 help-artikelen gevonden</h3>
                </span>
                <div class="dso-context-container">
                    <div class="dso-context-select">
                        <label for="sorting-select">Sorteer op:</label>
                        <select id="sorting-select">
                            <option value="most-chosen">Meest gekozen</option>
                            <option value="alphabetic" selected>Relevantie</option>
                        </select>
                    </div>
                </div>
            </div>
            <h4><a href="#">Wat is een situatieschets?</a></h4>
            <p>Een situatietekening is een tekening van een terrein met daarop aanwezige bebouwing. Hierbij wordt duidelijk hoe en waar gebouwen op de kavel staan</p>
            <h4><a href="#">Wat heb ik nodig voor een vergunningaanvraag?</a></h4>
            <p>Voor elke situatie en vergunning zullen er verschillende onderwerpen van belang zijn. Neem een aanvraag goed door met betrokken partijen. </p>
        </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="dso-button-row">
    {% render '@button', {type: 'button', modifier: 'dso-tertiary', label: 'Terug naar helpcentrum', icon: 'chevron-left'} %}
  </div>
  <h1>Zoekresultaat voor โ€˜Situatieschetsโ€™</h1>
  <div class="row">
    <div class="col-md-8">
      {% render '@search-bar', search %}
      <hr>
      <div class="dso-context-wrapper">
        <span class="dso-context-label" aria-hidden="true">
          <h3>2 help-artikelen gevonden</h3>
        </span>
        <div class="dso-context-container">
          <div class="dso-context-select">
            <label for="sorting-select">Sorteer op:</label>
            <select id="sorting-select">
              <option value="most-chosen">Meest gekozen</option>
              <option value="alphabetic" selected>Relevantie</option>
            </select>
          </div>
        </div>
      </div>
      <h4><a href="#">Wat is een situatieschets?</a></h4>
      <p>Een situatietekening is een tekening van een terrein met daarop aanwezige bebouwing. Hierbij wordt duidelijk hoe en waar gebouwen op de kavel staan</p>
      <h4><a href="#">Wat heb ik nodig voor een vergunningaanvraag?</a></h4>
      <p>Voor elke situatie en vergunning zullen er verschillende onderwerpen van belang zijn. Neem een aanvraag goed door met betrokken partijen. </p>
    </div>
  </div>
</main>
{% render '@footer' %}
search:
  inputType: search-bar
  label: Zoek uw activiteiten
  value: Situatieschets
  icon: true
  id: filter_activiteiten
  buttonLabel: Zoeken
  clearButton: true
  hiddenLabel: true