User Manual
Menu
Close
User Manual

Product

This is the product molecule. Use this in combination with different product molecules to display a grid/list of products. (ex. related products, recommended products, ..)

Products are very flexible blocks with a lot of possible properties:

  • Image & Alt text
  • Title
  • Price
  • Flag (optional)
  • Eta tag (optional)
  • Status (optional)
  • Shipping (optional)

Default

This is the general product tile. The img scales on hover.

  • L liggend harde kaft
  • vanaf
    € 12,95
  • 3-5 werkdagen

    Morgen in huis


      
        
      

  
	
		<div class="m-product ">
			<div class="m-product__link-container">
				<a href="<!-- product link -->" class="m-product__link">
					<img class="m-product__img" src="<!-- img src -->" alt="<!-- alt text -->"/>
          
				</a>
				
				  
    <div class="a-flag "><!-- flag text --></div>

				
			</div>
			<ul class="m-product__info">
				<li class="m-product__title">
				  <h5><!-- product title --></h5>
				</li>
				<li class="m-product__price">
  				
  				  <!-- ETA label -->
  				
				  <h6><!-- price text --></h6>
				</li>
				<li class="m-product__shipping">
  				
  				  <!-- shipping text -->
  				
          
  				  
    
        <div class="a-status ">
                <div class="a-status__icon <!-- icon status -->"></div>
                <p class="a-status__message"><!-- status text --></p>
        </div>
    

  				
				</li>
			</ul>
		</div>
	



    
      

      
    

This is a title

this is usage documentation is written in markdown