Zoeken In Lijst Cards

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>
                <a href="#">
                    Regels op de kaart
                </a>
            </li>
            <li class="dso-active">
                <a href="#" aria-current="page">
                    Zoeken in wetgeving
                </a>
            </li>
        </ul>
    </nav>

</header>

<main>
    <div>
        <h1>Zoeken in wetgeving</h1>
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<sup id="#voetnoot14link" class="dso-footnote-reference"><a href="#voetnoot14">[14]</a></sup></p>
        <div class="row">
            <div class="col-md-8">
                <div class="dso-app-heading">

                    <h2>
                        Wetgeving Gemeente Den Haag

                    </h2>

                </div>
                <div class="dso-search-bar">
                    <div class="dso-search-bar-input">
                        <label for="search-bar--hidden-button">Zoeken in Lijst</label>
                        <span class="dso-search-icon" aria-hidden="true"></span>
                        <input type="text" id="search-bar--hidden-button" placeholder="Zoek op naam, datum, initiator of status" />
                    </div>
                    <button type="button" class="dso-secondary sr-only">
                        Zoeken
                    </button>
                </div>
                <h5>Actieve filters: <dso-badge status="success">Omgevingswet document</dso-badge>
                    <dso-badge status="warning">Geldige oude wetgeving</dso-badge>
                </h5>
                <ul class="dso-card-list">

                    <li>
                        <div class="dso-card">
                            <div class="dso-card-heading">
                                <a href="#">
                                    <h2>
                                        <span>Omgevingsplan industrieterrein Lange Voorden</span>
                                        <dso-icon icon="chevron-right"></dso-icon>
                                    </h2>
                                </a>

                                <div class="dso-card-interactions">

                                    <div class="dso-card-interaction">
                                        <button type="button" class="dso-tertiary"><span class="sr-only">Extra informatie</span>
                                            <dso-icon icon="info"></dso-icon>
                                        </button>
                                    </div>

                                </div>

                            </div>
                            <div class="dso-card-content">
                                <div class="dso-rich-content">
                                    <p>Gemeente Nieuwegein lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                                </div>
                            </div>
                        </div>

                    </li>

                    <li>
                        <div class="dso-card">
                            <div class="dso-card-heading">
                                <a href="#">
                                    <h2>
                                        <span>Omgevingsplan Gemeente Den Haag</span>
                                        <dso-icon icon="chevron-right"></dso-icon>
                                    </h2>
                                </a>

                                <div class="dso-card-interactions">

                                    <div class="dso-card-interaction">
                                        <button type="button" class="dso-tertiary"><span class="sr-only">Extra informatie</span>
                                            <dso-icon icon="info"></dso-icon>
                                        </button>
                                    </div>

                                </div>

                            </div>
                            <div class="dso-card-content">
                                <div class="dso-rich-content">
                                    <p>Brouwersmolen eget iaculis nisi quam in libero.</p>
                                </div>
                            </div>
                        </div>

                    </li>

                    <li>
                        <div class="dso-card">
                            <div class="dso-card-heading">
                                <a href="#">
                                    <h2>
                                        <span>Flora en Fauna beslissing 2019</span>
                                        <dso-icon icon="chevron-right"></dso-icon>
                                    </h2>
                                </a>

                                <div class="dso-card-interactions">

                                    <div class="dso-card-interaction">
                                        <button type="button" class="dso-tertiary"><span class="sr-only">Extra informatie</span>
                                            <dso-icon icon="info"></dso-icon>
                                        </button>
                                    </div>

                                </div>

                            </div>
                            <div class="dso-card-content">
                                <div class="dso-rich-content">
                                    <p>Brouwersmolen eget iaculis nisi quam in libero.</p>
                                </div>
                            </div>
                        </div>

                    </li>

                    <li>
                        <div class="dso-card">
                            <div class="dso-card-heading">
                                <a href="#">
                                    <h2>
                                        <span>Bestemmingsplan Zuiderpark</span>
                                        <dso-icon icon="chevron-right"></dso-icon>
                                    </h2>
                                </a>

                                <div class="dso-card-interactions">

                                    <div class="dso-card-interaction">
                                        <button type="button" class="dso-tertiary"><span class="sr-only">Extra informatie</span>
                                            <dso-icon icon="info"></dso-icon>
                                        </button>
                                    </div>

                                </div>

                            </div>
                            <div class="dso-card-content">
                                <div class="dso-rich-content">
                                    <p>Zuiderpark eget iaculis nisi quam in libero.</p>
                                </div>
                            </div>
                        </div>

                    </li>

                </ul>

            </div>
            <div class="col-md-4">
                <h2 class="dso-steps-indicator">Filters</h2>
                <form>
                    <fieldset>
                        <legend hidden></legend>
                        <fieldset class="form-group dso-checkboxes">
                            <legend class="sr-only">Selecteer uw gewenste filter</legend>
                            <div class="dso-label-container">
                                <span class="control-label" aria-hidden="true">
                                    Selecteer uw gewenste filter
                                </span>
                            </div>
                            <div class="dso-field-container">

                                <div class="dso-selectable">
                                    <input type="checkbox" id="aanhanger-0" name="aanhanger" value="bak" checked>
                                    <label for="aanhanger-0">
                                        <dso-badge status="success">Omgevingswet document</dso-badge>
                                    </label>

                                </div>

                                <div class="dso-selectable">
                                    <input type="checkbox" id="aanhanger-1" name="aanhanger" value="caravan" checked>
                                    <label for="aanhanger-1">
                                        <dso-badge status="warning">Geldige oude wetgeving</dso-badge>
                                    </label>

                                </div>

                                <div class="dso-selectable">
                                    <input type="checkbox" id="aanhanger-2" name="aanhanger" value="fietsendrager">
                                    <label for="aanhanger-2">
                                        <dso-badge status="danger">Niet geldige oude wetgeving</dso-badge>
                                    </label>

                                </div>

                            </div>
                        </fieldset>
                    </fieldset>
                </form>
            </div>
        </div>
        <ol class="dso-footnotes">
            <li class="dso-footnote" id="voetnoot14">14. <a href="#voetnoot14link" class="dso-footnote-backlink" aria-label="Terug naar voetnoot 14" title="Terug naar voetnoot 14"></a> Foreest Groen Consult (2018) Quickscan natuuronderzoek Ontwikkeling Herveld-Noord. 26 juli 2018.</li>
        </ol>
    </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 ros 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: breadcrumbs} %}

<main>
  <div>
    <h1>Zoeken in wetgeving</h1>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<sup id="#voetnoot14link" class="dso-footnote-reference"><a href="#voetnoot14">[14]</a></sup></p>
    <div class="row">
      <div class="col-md-8">
        {% render '@application-heading', appheading -%}
        <div class="dso-search-bar">
          <div class="dso-search-bar-input">
            <label for="search-bar--hidden-button">Zoeken in Lijst</label>
            <span class="dso-search-icon" aria-hidden="true"></span>
            <input type="text" id="search-bar--hidden-button" placeholder="Zoek op naam, datum, initiator of status" />
          </div>
          <button type="button" class="dso-secondary sr-only">
          Zoeken
          </button>
        </div>
        <h5>Actieve filters: <dso-badge status="success">Omgevingswet document</dso-badge><dso-badge status="warning">Geldige oude wetgeving</dso-badge></h5>
        {% render '@card-list', cardList %}
      </div>
      <div class="col-md-4">
        <h2 class="dso-steps-indicator">Filters</h2>
        <form>
          <fieldset>
            <legend hidden></legend>
            <fieldset class="form-group dso-checkboxes">
              <legend class="sr-only">Selecteer uw gewenste filter</legend>
              <div class="dso-label-container">
                <span class="control-label" aria-hidden="true">
                  Selecteer uw gewenste filter
                </span>
              </div>
              <div class="dso-field-container">
                {% render '@selectable', {
                  type: 'checkbox',
                  id: 'aanhanger-0',
                  name: 'aanhanger',
                  label: '<dso-badge status="success">Omgevingswet document</dso-badge>',
                  value: 'bak',
                  checked: true
                } %}
                {% render '@selectable', {
                  type: 'checkbox',
                  id: 'aanhanger-1',
                  name: 'aanhanger',
                  label: '<dso-badge status="warning">Geldige oude wetgeving</dso-badge>',
                  value: 'caravan',
                  checked: true
                } %}
                {% render '@selectable', {
                  type: 'checkbox',
                  id: 'aanhanger-2',
                  name: 'aanhanger',
                  label: '<dso-badge status="danger">Niet geldige oude wetgeving</dso-badge>',
                  value: 'fietsendrager'
                } %}
              </div>
            </fieldset>
          </fieldset>
        </form>
      </div>
    </div>
    <ol class="dso-footnotes">
      <li class="dso-footnote" id="voetnoot14">14. <a href="#voetnoot14link" class="dso-footnote-backlink" aria-label="Terug naar voetnoot 14" title="Terug naar voetnoot 14"></a> Foreest Groen Consult (2018) Quickscan natuuronderzoek Ontwikkeling Herveld-Noord. 26 juli 2018.</li>
    </ol>
  </div>
</main>

{% render '@footer' %}
menu:
  modifier: main
  items:
    - label: Regels op de kaart
    - label: Zoeken in wetgeving
      active: true
appheading:
  subtitle: Wetgeving Gemeente Den Haag
breadcrumbs:
  crumbs: null
cardList:
  cards:
    - label: Omgevingsplan industrieterrein Lange Voorden
      content: >-
        Gemeente Nieuwegein lorem ipsum dolor sit amet, consectetur adipiscing
        elit.
      interactions:
        - button:
            type: button
            modifier: dso-tertiary
            icon: info
            label: Extra informatie
            iconOnly: true
    - label: Omgevingsplan Gemeente Den Haag
      content: Brouwersmolen eget iaculis nisi quam in libero.
      interactions:
        - button:
            type: button
            modifier: dso-tertiary
            icon: info
            label: Extra informatie
            iconOnly: true
    - label: Flora en Fauna beslissing 2019
      content: Brouwersmolen eget iaculis nisi quam in libero.
      interactions:
        - button:
            type: button
            modifier: dso-tertiary
            icon: info
            label: Extra informatie
            iconOnly: true
    - label: Bestemmingsplan Zuiderpark
      content: Zuiderpark eget iaculis nisi quam in libero.
      interactions:
        - button:
            type: button
            modifier: dso-tertiary
            icon: info
            label: Extra informatie
            iconOnly: true