<form method="get" action="">
<div class="o-flow">
<div>
<fieldset class="o-flow o-flow--small">
<legend class="u-heading u-h5">Type opleiding</legend>
<ul class="o-layout o-layout--fit o-layout--gap-tiny o-layout--gap-block-tiny">
<li>
<label for="t_0" class="c-filter__wrap-filter">
<input type="checkbox" id="t_0" class="c-filter__checkbox" name="filter" value="t_0">
<span class="c-filter__filter">
Bachelor
</span>
</label>
</li>
<li>
<label for="t_1" class="c-filter__wrap-filter">
<input type="checkbox" id="t_1" class="c-filter__checkbox" name="filter" value="t_1">
<span class="c-filter__filter">
Master
</span>
</label>
</li>
</ul>
</fieldset>
</div>
<div>
<fieldset class="o-flow o-flow--small">
<legend class="u-heading u-h5">Interessegebied</legend>
<ul class="o-layout o-layout--fit o-layout--gap-tiny o-layout--gap-block-tiny">
<li>
<label for="i_0" class="c-filter__wrap-filter">
<input type="checkbox" id="i_0" class="c-filter__checkbox" name="filter" value="i_0">
<span class="c-filter__filter">
Agro
</span>
</label>
</li>
<li>
<label for="i_1" class="c-filter__wrap-filter">
<input type="checkbox" id="i_1" class="c-filter__checkbox" name="filter" value="i_1">
<span class="c-filter__filter">
Biologie
</span>
</label>
</li>
<li>
<label for="i_2" class="c-filter__wrap-filter">
<input type="checkbox" id="i_2" class="c-filter__checkbox" name="filter" value="i_2">
<span class="c-filter__filter">
Food
</span>
</label>
</li>
<li>
<label for="i_3" class="c-filter__wrap-filter">
<input type="checkbox" id="i_3" class="c-filter__checkbox" name="filter" value="i_3">
<span class="c-filter__filter">
Business
</span>
</label>
</li>
<li>
<label for="i_4" class="c-filter__wrap-filter">
<input type="checkbox" id="i_4" class="c-filter__checkbox" name="filter" value="i_4">
<span class="c-filter__filter">
Tech
</span>
</label>
</li>
<li>
<label for="i_5" class="c-filter__wrap-filter">
<input type="checkbox" id="i_5" class="c-filter__checkbox" name="filter" value="i_5">
<span class="c-filter__filter">
Design
</span>
</label>
</li>
</ul>
</fieldset>
</div>
<div>
<fieldset class="o-flow o-flow--small">
<legend class="u-heading u-h5">Stad</legend>
<ul class="o-layout o-layout--fit o-layout--gap-tiny o-layout--gap-block-tiny">
<li>
<label for="s_0" class="c-filter__wrap-filter">
<input type="checkbox" id="s_0" class="c-filter__checkbox" name="filter" value="s_0">
<span class="c-filter__filter">
Den Bosch
</span>
</label>
</li>
<li>
<label for="s_1" class="c-filter__wrap-filter">
<input type="checkbox" id="s_1" class="c-filter__checkbox" name="filter" value="s_1">
<span class="c-filter__filter">
Venlo
</span>
</label>
</li>
</ul>
</fieldset>
</div>
<button type="submit" class="c-button ">
<span class="c-button__inner">
<span class="c-button__label " data-module-bind="btn-label">
Toon resultaten
</span>
</span>
</button>
</div>
</form>
<form method="get" action="">
<div class="o-flow">
{{# each filters.items }}
<div>
<fieldset class="o-flow o-flow--small">
<legend class="u-heading u-h5">{{ label }}</legend>
<ul class="o-layout o-layout--fit o-layout--gap-tiny o-layout--gap-block-tiny">
{{# each items }}
<li>
<label for="{{ id }}" class="c-filter__wrap-filter">
<input
type="checkbox"
id="{{ id }}"
class="c-filter__checkbox"
name="filter"
value="{{ id }}"
>
<span class="c-filter__filter">
{{ label }}
</span>
</label>
</li>
{{/each}}
</ul>
</fieldset>
</div>
{{/ each }}
{{> '@atoms-button' element='button' type='submit' label='Toon resultaten' }}
</div>
</form>
{
"filters": {
"heading": "Vind jouw opleiding",
"items": [
{
"label": "Type opleiding",
"items": [
{
"id": "t_0",
"label": "Bachelor"
},
{
"id": "t_1",
"label": "Master"
}
]
},
{
"label": "Interessegebied",
"items": [
{
"id": "i_0",
"label": "Agro"
},
{
"id": "i_1",
"label": "Biologie"
},
{
"id": "i_2",
"label": "Food"
},
{
"id": "i_3",
"label": "Business"
},
{
"id": "i_4",
"label": "Tech"
},
{
"id": "i_5",
"label": "Design"
}
]
},
{
"label": "Stad",
"items": [
{
"id": "s_0",
"label": "Den Bosch"
},
{
"id": "s_1",
"label": "Venlo"
}
]
}
]
}
}
No notes defined.