Statistics

The statistics component is used to show some interesting numbers.

Default

px

			
				<div class="m-statistics">
	<div class="m-statistics__container">
		<div class="m-statistics__carousel js-m-statistics-carousel">
			<div class="m-statistics__item">
				<h2 class="m-statistics__amout js-m-statistics-number">3841</h2>
				<h4 class="m-statistics__description">ton ingezameld gewicht</h4>
			</div>
			<div class="m-statistics__item">
				<h2 class="m-statistics__amout js-m-statistics-number">24840</h2>
				<h4 class="m-statistics__description">ophalingen</h4>
			</div>
			<div class="m-statistics__item">
				<h2 class="m-statistics__amout js-m-statistics-number">24366</h2>
				<h4 class="m-statistics__description">Inzamelpunten</h4>
			</div>
			<div class="m-statistics__item">
				<h2 class="m-statistics__amout js-m-statistics-number">1962</h2>
				<h4 class="m-statistics__description">deelnemers</h4>
			</div>
		</div>
		<p class="m-statistics__note">* in 2016</p>
	</div>
</div>
			

		

Documentation

JavaScript

  • js-m-statistics-carousel

    This class will put the numbers in a carousel on mobile screens

  • js-m-statistics-number

    Putting this class on the number item will animate them counting up