User Manual
Menu
Close
User Manual

Shopping-cart

This is the shopping cart component. Used for the Header component.

Empty

The empty shopping cart molecule.
Click on the icon to see it's click behaviour.

Winkelmandje

Je winkelmandje is leeg.


      
        
      

  
	<div class="m-shopping-cart ">
		<div class="m-shopping-cart__button">
			<span class="icon-shopping-cart"></span>
		</div>

		
	<div class="m-tooltip m-tooltip--bottom m-tooltip__header {{classes}} m-shopping-cart__bottom hide">
		<button class="icon-close"></button>
		<div class="m-tooltip__content m-tooltip__empty-cart">
			<p class="m-tooltip__content__title"><!--text--></p>
			<p class="m-tooltip__content__text"><!--text--></p>
		</div>
	</div>
 
	</div>



    
      

      
    

With-content

The shopping cart molecule with content.
Click on the icon to see it's click behaviour.

3
Winkelmandje
Totaalprijs
Fotokader groot
16.00€
Stuks:1
Fotokader
14.00€
Stuks:1
Fotokader klein
12.00€
Stuks:1
Verzendkosten
4.95€
Totaalprijs
46.95€
BTW inbegrepen

      
        
      

  
	<div class="m-shopping-cart ">
		<div class="m-shopping-cart__button">
			<span class="icon-shopping-cart"></span>
			<span class="m-shopping-cart__bubble">3</span>
		</div>
		
	<div class="m-tooltip m-tooltip--bottom m-tooltip__header {{classes}} m-shopping-cart__bottom hide">
		<button class="icon-close"></button>
		<div class="m-tooltip__content m-tooltip__mini-cart">
			<div class="m-tooltip__mini-cart__heading">
				<div class="m-tooltip__mini-cart__heading-title"><!--text--></div>
				<div class="m-tooltip__mini-cart__heading-text"><!--text--></div>
			</div>
			
			<div class="m-tooltip__mini-cart__product">
				<div class="m-tooltip__mini-cart__product-head">
					<div class="m-tooltip__mini-cart__product-title"><!--text--></div>
					<div class="m-tooltip__mini-cart__product-price"><!--text--></div>
				</div>
				<div class="m-tooltip__mini-cart__product-quantity">Stuks:<!--text--></div>
			</div>
			
			<div class="m-tooltip__mini-cart__product">
				<div class="m-tooltip__mini-cart__product-head">
					<div class="m-tooltip__mini-cart__product-title"><!--text--></div>
					<div class="m-tooltip__mini-cart__product-price"><!--text--></div>
				</div>
				<div class="m-tooltip__mini-cart__product-quantity">Stuks:<!--text--></div>
			</div>
			
			<div class="m-tooltip__mini-cart__product">
				<div class="m-tooltip__mini-cart__product-head">
					<div class="m-tooltip__mini-cart__product-title"><!--text--></div>
					<div class="m-tooltip__mini-cart__product-price"><!--text--></div>
				</div>
				<div class="m-tooltip__mini-cart__product-quantity">Stuks:<!--text--></div>
			</div>
			
			<div class="m-tooltip__mini-cart__extra-cost">
				<div class="m-tooltip__mini-cart__delivery-cost">
					<div class="m-tooltip__mini-cart__delivery-title"><!--text--></div>
					<div class="m-tooltip__mini-cart__delivery-price"><!--text--></div>
				</div>
				
			</div>
			<div class="m-tooltip__mini-cart__total">
				<div class="m-tooltip__mini-cart__total-title"><!--text--></div>
				<div class="m-tooltip__mini-cart__total-price"><!--text--></div>
			</div>
			<div class="m-tooltip__mini-cart__vat"><!--text--></div>
		</div>
		<div class="m-tooltip__button-order">
			<button class="a-button"><!--text--></button>
		</div>
	</div>

	</div>



    
      

      
    

This is a title

this is usage documentation is written in markdown