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-cards">

                    <li>
                        <div class="dso-card">
                            <a href="#">
                                <div class="dso-rich-content">
                                    <h2>Omgevingsplan industrieterrein Lange Voorden</h2>
                                    <p>Gemeente Nieuwegein lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                                </div>
                            </a>

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

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

                                    <button type="button" class="dso-tertiary"><span class="sr-only">Download document</span>
                                        <dso-icon icon="download"></dso-icon>
                                    </button>

                                </div>

                                <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>

                    </li>

                    <li>
                        <div class="dso-card">
                            <a href="#">
                                <div class="dso-rich-content">
                                    <h2>Omgevingsplan Gemeente Den Haag</h2>
                                    <p>Brouwersmolen eget iaculis nisi quam in libero.</p>
                                </div>
                            </a>

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

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

                                    <button type="button" class="dso-tertiary"><span class="sr-only">Download document</span>
                                        <dso-icon icon="download"></dso-icon>
                                    </button>

                                </div>

                                <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>

                    </li>

                    <li>
                        <div class="dso-card">
                            <a href="#">
                                <div class="dso-rich-content">
                                    <h2>Flora en Fauna beslissing 2019</h2>
                                    <p>Brouwersmolen eget iaculis nisi quam in libero.</p>
                                </div>
                            </a>

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

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

                                    <button type="button" class="dso-tertiary"><span class="sr-only">Download document</span>
                                        <dso-icon icon="download"></dso-icon>
                                    </button>

                                </div>

                                <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>

                    </li>

                    <li>
                        <div class="dso-card">
                            <a href="#">
                                <div class="dso-rich-content">
                                    <h2>Bestemmingsplan Zuiderpark</h2>
                                    <p>Zuiderpark eget iaculis nisi quam in libero.</p>
                                </div>
                            </a>

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

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

                                    <button type="button" class="dso-tertiary"><span class="sr-only">Download document</span>
                                        <dso-icon icon="download"></dso-icon>
                                    </button>

                                </div>

                                <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>

                    </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="dso-label-container">
                                <label class="control-label">
                                    Selecteer uw gewenste filter
                                </label>
                            </legend>
                            <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>
        <div class="dso-rich-content">
            <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>
    </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>
        <ul {{ className('dso-cards', modifiers, [interactionsLocation, 'dso-interactions-' + interactionsLocation]) }}>
          {% for card in cards %}
            <li>
              {% render '@card', card %}
            </li>
          {% endfor %}
        </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="dso-label-container">
                <label class="control-label">
                  Selecteer uw gewenste filter
                </label>
              </legend>
              <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>
    <div class="dso-rich-content">
      <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>
  </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
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: download
          label: Download document
          iconOnly: true
      - 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: download
          label: Download document
          iconOnly: true
      - 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: download
          label: Download document
          iconOnly: true
      - 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: download
          label: Download document
          iconOnly: true
      - button:
          type: button
          modifier: dso-tertiary
          icon: info
          label: Extra informatie
          iconOnly: true