Selectie Lijst

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="row">
        <div class="col-md-8">
            <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>Machtigen?</h1>
            <p>Hier vindt u een overzicht van vragen en antwoorden over machtigen
                <p />
            <h2>Algemene informatie</h2>

            <ul class="dso-link-list">
                <li>
                    <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit?</a>

                </li>
                <li>
                    <a href="#">Sed do eiusmod tempor?</a>

                </li>
                <li>
                    <a href="#">Excepteur sint occaecat cupidatat?</a>

                </li>
                <li>
                    <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit?</a>

                </li>
                <li>
                    <a href="#">Sed do eiusmod tempor?</a>

                </li>
                <li>
                    <a href="#">Excepteur sint occaecat cupidatat?</a>

                </li>
                <li>
                    <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit?</a>

                </li>
                <li>
                    <a href="#">Sed do eiusmod tempor?</a>

                </li>
                <li>
                    <a href="#">Excepteur sint occaecat cupidatat?</a>

                </li>
            </ul>

            <h2>Hoe het werkt</h2>

            <ul class="dso-link-list">
                <li>
                    <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit?</a>

                </li>
                <li>
                    <a href="#">Sed do eiusmod tempor?</a>

                </li>
                <li>
                    <a href="#">Excepteur sint occaecat cupidatat?</a>

                </li>
                <li>
                    <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit?</a>

                </li>
                <li>
                    <a href="#">Sed do eiusmod tempor?</a>

                </li>
                <li>
                    <a href="#">Excepteur sint occaecat cupidatat?</a>

                </li>
                <li>
                    <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit?</a>

                </li>
                <li>
                    <a href="#">Sed do eiusmod tempor?</a>

                </li>
                <li>
                    <a href="#">Excepteur sint occaecat cupidatat?</a>

                </li>
            </ul>

            <hr>
            <p>Kunt u niet vinden wat u nodig heeft? <a href="#">Bekijk alle onderwerpen</a></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="row">
    <div class="col-md-8">
      <div class="dso-button-row">
        {% render '@button', {type: 'button', modifier: 'dso-tertiary', label: 'Terug naar Helpcentrum', icon: 'chevron-left'} %}
      </div>
      <h1>Machtigen?</h1>
      <p>Hier vindt u een overzicht van vragen en antwoorden over machtigen<p/>
      <h2>Algemene informatie</h2>
      {% render '@link-list', links1 %}
      <h2>Hoe het werkt</h2>
      {% render '@link-list', links2 %}
      <hr>
      <p>Kunt u niet vinden wat u nodig heeft? <a href="#">Bekijk alle onderwerpen</a></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
links1:
  links:
    - label: Lorem ipsum dolor sit amet, consectetur adipiscing elit?
      url: '#'
    - label: Sed do eiusmod tempor?
      url: '#'
    - label: Excepteur sint occaecat cupidatat?
      url: '#'
    - label: Lorem ipsum dolor sit amet, consectetur adipiscing elit?
      url: '#'
    - label: Sed do eiusmod tempor?
      url: '#'
    - label: Excepteur sint occaecat cupidatat?
      url: '#'
    - label: Lorem ipsum dolor sit amet, consectetur adipiscing elit?
      url: '#'
    - label: Sed do eiusmod tempor?
      url: '#'
    - label: Excepteur sint occaecat cupidatat?
      url: '#'
links2:
  links:
    - label: Lorem ipsum dolor sit amet, consectetur adipiscing elit?
      url: '#'
    - label: Sed do eiusmod tempor?
      url: '#'
    - label: Excepteur sint occaecat cupidatat?
      url: '#'
    - label: Lorem ipsum dolor sit amet, consectetur adipiscing elit?
      url: '#'
    - label: Sed do eiusmod tempor?
      url: '#'
    - label: Excepteur sint occaecat cupidatat?
      url: '#'
    - label: Lorem ipsum dolor sit amet, consectetur adipiscing elit?
      url: '#'
    - label: Sed do eiusmod tempor?
      url: '#'
    - label: Excepteur sint occaecat cupidatat?
      url: '#'