_design-filters
A default color selector.
Vind het perfecte design
Gelegenheid
Kleur van het ontwerp
<div class="m-design-filters ">
<div class="m-design-filters__header">
<h3>Vind het perfecte design</h3>
</div>
<div class="m-design-filters__content">
<div class="m-design-filters__item">
<div class="m-design-filters__item__title">
<p>Gelegenheid</p>
</div>
<div class="a-input a-input--select ">
<div class="a-input__holder">
<label for="styleguide-select" class="a-input__label">
</label>
<select class="a-input__value">
<option class="a-input--select__placeholder" selected disabled>Selecteer een item</option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select>
</div>
</div>
</div>
<div class="m-design-filters__item">
<div class="m-design-filters__item__title">
<p>Kleur van het ontwerp</p>
</div>
<div class="a-color-selector">
<input class="a-color-selector__checkbox" type="radio" id="white" name="color-selector" checked/>
<label class="a-color-selector__label" for="white">
<p class="a-color-selector__color" style="background-color: #ffffff"></p>
</label>
</div>
<div class="a-color-selector">
<input class="a-color-selector__checkbox" type="radio" id="yellow" name="color-selector" />
<label class="a-color-selector__label" for="yellow">
<p class="a-color-selector__color" style="background-color: #FFD800"></p>
</label>
</div>
<div class="a-color-selector">
<input class="a-color-selector__checkbox" type="radio" id="orange" name="color-selector" />
<label class="a-color-selector__label" for="orange">
<p class="a-color-selector__color" style="background-color: #FFA501"></p>
</label>
</div>
<div class="a-color-selector">
<input class="a-color-selector__checkbox" type="radio" id="red" name="color-selector" />
<label class="a-color-selector__label" for="red">
<p class="a-color-selector__color" style="background-color: #FF0201"></p>
</label>
</div>
<div class="a-color-selector">
<input class="a-color-selector__checkbox" type="radio" id="blue" name="color-selector" />
<label class="a-color-selector__label" for="blue">
<p class="a-color-selector__color" style="background-color: #4168E1"></p>
</label>
</div>
<div class="a-color-selector">
<input class="a-color-selector__checkbox" type="radio" id="white" name="color-selector" checked/>
<label class="a-color-selector__label" for="white">
<p class="a-color-selector__color" style="background-color: #ffffff"></p>
</label>
</div>
<div class="a-color-selector">
<input class="a-color-selector__checkbox" type="radio" id="yellow" name="color-selector" />
<label class="a-color-selector__label" for="yellow">
<p class="a-color-selector__color" style="background-color: #FFD800"></p>
</label>
</div>
<div class="a-color-selector">
<input class="a-color-selector__checkbox" type="radio" id="orange" name="color-selector" />
<label class="a-color-selector__label" for="orange">
<p class="a-color-selector__color" style="background-color: #FFA501"></p>
</label>
</div>
<div class="a-color-selector">
<input class="a-color-selector__checkbox" type="radio" id="red" name="color-selector" />
<label class="a-color-selector__label" for="red">
<p class="a-color-selector__color" style="background-color: #FF0201"></p>
</label>
</div>
<div class="a-color-selector">
<input class="a-color-selector__checkbox" type="radio" id="blue" name="color-selector" />
<label class="a-color-selector__label" for="blue">
<p class="a-color-selector__color" style="background-color: #4168E1"></p>
</label>
</div>
<div class="a-color-selector">
<input class="a-color-selector__checkbox" type="radio" id="white" name="color-selector" checked/>
<label class="a-color-selector__label" for="white">
<p class="a-color-selector__color" style="background-color: #ffffff"></p>
</label>
</div>
<div class="a-color-selector">
<input class="a-color-selector__checkbox" type="radio" id="yellow" name="color-selector" />
<label class="a-color-selector__label" for="yellow">
<p class="a-color-selector__color" style="background-color: #FFD800"></p>
</label>
</div>
<div class="a-color-selector">
<input class="a-color-selector__checkbox" type="radio" id="orange" name="color-selector" />
<label class="a-color-selector__label" for="orange">
<p class="a-color-selector__color" style="background-color: #FFA501"></p>
</label>
</div>
<div class="a-color-selector">
<input class="a-color-selector__checkbox" type="radio" id="red" name="color-selector" />
<label class="a-color-selector__label" for="red">
<p class="a-color-selector__color" style="background-color: #FF0201"></p>
</label>
</div>
<div class="a-color-selector">
<input class="a-color-selector__checkbox" type="radio" id="blue" name="color-selector" />
<label class="a-color-selector__label" for="blue">
<p class="a-color-selector__color" style="background-color: #4168E1"></p>
</label>
</div>
<div class="a-color-selector">
<input class="a-color-selector__checkbox" type="radio" id="blue" name="color-selector" />
<label class="a-color-selector__label" for="blue">
<p class="a-color-selector__color" style="background-color: #4168E1"></p>
</label>
</div>
</div>
</div>
</div>