User Manual
Menu
Close
User Manual

Product-grid

A grid used to show a series of products.
Can contain between 4 and 50+ products.
Can show an optional title.

Default

This is an example of a 'related products' section. The width of the product container is 100% of it's parent container and has a flex-wrap.

Interessant voor jou

  • Klok
  • vanaf
    € 22.95*
  • 3-5 werkdagen
  • L liggend harde kaft
  • vanaf
    € 24.95*
  • 4-7 werkdagen
  • Wandkalender
  • vanaf
    € 14.95*
  • 3-5 werkdagen
  • Fotocanvas
  • vanaf
    € 12.95*
  • 3-5 werkdagen

      
        
      

    
	<div class="m-product-grid ">
    
		  <h2 class="m-product-grid__title"><!-- title --></h2>
		
		<div class="m-product-grid__content">
			
	
		<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>
	

		</div>
	</div>



    
      

      
    

This is a title

this is usage documentation is written in markdown