Filter
.filter
The filter component is used in filter applications like Dagje Uit. Its functionality can be found in the Angular 2 application.
Markup
<div class="grid">
<div class="grid__unit s-4-4 m-6-12 l-4-12">
<form class="filter ng-untouched ng-pristine ng-valid">
<div class="filter__field">
<ns-resetform><button class="button button--native-link">Wis alle filters</button></ns-resetform>
</div>
<ns-filter class="filter__field" id="afstanden">
<fieldset>
<legend class="filter__fieldLegend headingXS">Afstand</legend>
<ul class="list formfield__inputGroup">
<li class="list__item filter__inputGroupItem ng-untouched ng-pristine ng-valid">
<ns-filtertype-checkbox>
<div class="checkbox checkbox--filter ng-untouched ng-pristine ng-valid"> <input class="checkbox__input ng-untouched ng-pristine ng-valid" type="checkbox" id="kleinerdan11"> <label class="checkbox__label" tabindex="-1" for="kleinerdan11"> Minder dan 10 km <span class="filter__amount">(8)</span> </label> </div>
</ns-filtertype-checkbox>
</li>
<li class="list__item filter__inputGroupItem ng-untouched ng-pristine ng-valid">
<ns-filtertype-checkbox>
<div class="checkbox checkbox--filter ng-untouched ng-pristine ng-valid"> <input class="checkbox__input ng-untouched ng-pristine ng-valid" type="checkbox" id="van11tot17"> <label class="checkbox__label" tabindex="-1" for="van11tot17"> 11 tot 16 km <span class="filter__amount">(5)</span> </label> </div>
</ns-filtertype-checkbox>
</li>
</ul>
</fieldset>
</ns-filter>
<ns-filter class="filter__field" id="soort">
<fieldset>
<legend class="filter__fieldLegend headingXS">Soort wandeling</legend>
<ul class="list formfield__inputGroup">
<li class="list__item filter__inputGroupItem ng-untouched ng-pristine ng-valid">
<ns-filtertype-checkbox>
<div class="checkbox checkbox--filter ng-untouched ng-pristine ng-valid"> <input class="checkbox__input ng-untouched ng-pristine ng-valid" type="checkbox" id="duinenenstrand"> <label class="checkbox__label" tabindex="-1" for="duinenenstrand"> Duinen en strand <span class="filter__amount">(5)</span> </label> </div>
</ns-filtertype-checkbox>
</li>
<li class="list__item filter__inputGroupItem ng-untouched ng-pristine ng-valid">
<ns-filtertype-checkbox>
<div class="checkbox checkbox--filter ng-untouched ng-pristine ng-valid"> <input class="checkbox__input ng-untouched ng-pristine ng-valid" type="checkbox" id="bos"> <label class="checkbox__label" tabindex="-1" for="bos"> Bos <span class="filter__amount">(4)</span> </label> </div>
</ns-filtertype-checkbox>
</li>
</ul>
</fieldset>
</ns-filter>
</form>
</div>
</div>