User Manual
Menu
Close
User Manual

Extra-options

This is the extra options molecule.

If you want to hide certain elements, like for ex. the price-tag , you can add the class "hide" to it

Landscape

This is the extra-options molecule. Landscape mode

canvas

Presentatiedoos

Bescherm je fotoboek in een stijlvolle zwarte presentatiedoos

+ € 10,00


      
        
      

  
	
		<div class="m-extra-options ">
			<div class="m-extra-options__top">
				<div class="m-extra-options__image-container">
					<img src="<!-- src -->" alt="<!-- alt -->" class="m-extra-options__image">
				</div>
				<div class="m-extra-options__detail">
					<h4 class="m-extra-options__title"><!-- title --></h4>
					<p class="m-extra-options__description"><!-- description --></p>
				</div>
			</div>
			
			<div class="m-extra-options__toggle-container">
				<p class="m-extra-options__price"><!-- price --></p>
				
	
		<div class="a-toggle ">
			<input class="a-toggle__input " type="checkbox" id="<!-- toggle id -->" <!-- state -->/>
			<label class="a-toggle__label" for="<!-- toggle id -->">
				<span class="a-toggle__label--checked"><!-- text checked --></span>
				<span class="a-toggle__label--unchecked"><!-- text unchecked --></span>
			</label>
		</div>
	

			</div>
			
		</div>
	



    
      

      
    

Portrait

This is the extra-options molecule. Portrait mode

kaders

Plaats je fotocanvas in een frame

Houten kaders beschikbaar in vijf kleuren:

  • Wit
  • Zwart
  • Zilver (kader niet beschikbaar voor 20 x 30 cm, 40 x 105, 50 x 75 cm)
  • taupe
  • hout

Er is aan elke zijde 1cm ruimte tussen de rand van de fotocanvas en het kader.
Het kleur van je kader kan je kiezen in je volgende stap

+ € 10,00


      
        
      

  
	
		<div class="m-extra-options m-extra-options--portrait">
			<div class="m-extra-options__top">

				<div class="m-extra-options__image-container">
					<img src="<!-- imgSrc -->" alt="<!-- text -->" class="m-extra-options__image">
				</div>

				<div class="m-extra-options__detail">
					<h4 class="m-extra-options__title"><!-- text --></h4>
					<p class="m-extra-options__description"><!-- text --></p>
					<div class="m-extra-options__description">
	<ul class="a-list ">
    	
    		<li class="a-list__item ">
			
    				<!-- text -->
			
			</li>
    	
    		<li class="a-list__item ">
			
    				<!-- text -->
			
			</li>
    	
    		<li class="a-list__item ">
			
    				<!-- text -->
			
			</li>
    	
    		<li class="a-list__item ">
			
    				<!-- text --> 
			
			</li>
    	
    		<li class="a-list__item ">
			
    				<!-- text -->
			
			</li>
    	

    </ul>
</div>
					<p class="m-extra-options__description"><!-- text --></p>
				</div>
			</div>
			
			<div class="m-extra-options__toggle-container">
				<p class="m-extra-options__price"><!-- text --></p>
				
	
		<div class="a-toggle ">
			<input class="a-toggle__input " type="checkbox" id="toggle" />
			<label class="a-toggle__label" for="toggle">
				<span class="a-toggle__label--checked">Ja</span>
				<span class="a-toggle__label--unchecked">Nee</span>
			</label>
		</div>
	

			</div>
			
		</div>
	



    
      

      
    

This is a title

this is usage documentation is written in markdown