User Manual
Menu
Close
User Manual

Design-filters

This is the default color selector. It works with radio buttons and is responsive. If you want to add colors, you can copy/paste the 'item container' inside the 'color-selector container'.
TODO: The correct icon needs to be inserted.

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




    
      

      
    

This is a title

this is usage documentation is written in markdown