Basket

This component contains a basket icon together with a badge and is used to display the items inside the basket. It makes use of the flyout component to show the content and is mainly presented within the header of the page.

Default

px

			
				<div class="o-basket js-basket ">
	<div class="o-basket__label">
		<div class="a-amount-indicator o-basket__badge">
			<span class="a-amount-indicator__icon icon-basket"></span>
			<span class="a-badge a-amount-indicator__badge undefined ">
				3
			</span>
		</div>
	</div>
	<div class="o-basket__container">
		<h5 class="o-basket__title">Opleidingen in jouw mandje</h5>
		<ul class="m-product-list o-basket__content">
			<li class="m-product-list__item">
				<div class="a-added-product ">
					<a class="a-added-product__link" href="">
						History of Magic
					</a>
					<button class="a-icon-button a-icon-button--animated a-added-product__button ">
						<span class="a-icon-button__icon icon-cancel"></span>
					</button>
				</div>
			</li>
			<li class="m-product-list__item">
				<div class="a-added-product ">
					<a class="a-added-product__link" href="">
						Defence Against the Dark Arts
					</a>
					<button class="a-icon-button a-icon-button--animated a-added-product__button ">
						<span class="a-icon-button__icon icon-cancel"></span>
					</button>
				</div>
			</li>
			<li class="m-product-list__item">
				<div class="a-added-product ">
					<a class="a-added-product__link" href="">
						Transfiguration
					</a>
					<button class="a-icon-button a-icon-button--animated a-added-product__button ">
						<span class="a-icon-button__icon icon-cancel"></span>
					</button>
				</div>
			</li>
		</ul>
		<div class="o-basket__action">
			<button class="a-button u-width-100 ">
				<span class="a-button__text">Inschrijven</span>
			</button>
		</div>
	</div>
</div>
			

		

Fallback

px

			
				<div class="o-basket js-basket ">
	<div class="o-basket__label">
		<div class="a-amount-indicator o-basket__badge">
			<span class="a-amount-indicator__icon icon-basket"></span>
			<span class="a-badge a-amount-indicator__badge undefined ">
				0
			</span>
		</div>
	</div>
	<div class="o-basket__container">
		<h5 class="o-basket__title">Opleidingen in jouw mandje</h5>
		<p class="o-basket__fallback">Jouw winkelmandje is leeg.</p>
	</div>
</div>
			

		

Documentation

States

  • is-open

    Indicates that the component is shown to the user. On desktop this is automatically done by hovering, but on mobile the user has to click to view the content.