Pagination

Pagination component to let the user navigate through different pages. The items of the pagination can have an is-active state.

Default

px

			
				<ul class="m-pagination ">
	<button class="a-button m-pagination__button m-pagination__button--prev u-mobile-hide ">
		<span class="a-button__icon a-button__icon--before icon-arrow-left"></span>
		<span class="a-button__text">vorige</span>
	</button>
	<button class="a-button m-pagination__button m-pagination__button--prev u-mobile-show " aria-label="test">
		<span class="a-button__icon a-button__icon--before icon-arrow-left"></span>
		<span class="a-button__text"></span>
	</button>
	<li class="m-pagination__item is-active">
		<a href="/">1</a>
	</li>
	<li class="m-pagination__item ">
		<a href="/">2</a>
	</li>
	<li class="m-pagination__item ">
		<a href="/">3</a>
	</li>
	<li class="m-pagination__item ">
		<a href="/">4</a>
	</li>
	<li class="m-pagination__item ">
		<a href="/">5</a>
	</li>
	<button class="a-button a-button--icon-after m-pagination__button m-pagination__button--next u-mobile-hide ">
		<span class="a-button__text">volgende</span>
		<span class="a-button__icon a-button__icon--after icon-arrow-right"></span>
	</button>
	<button class="a-button a-button--icon-after m-pagination__button m-pagination__button--next u-mobile-show " aria-label="test">
		<span class="a-button__text"></span>
		<span class="a-button__icon a-button__icon--after icon-arrow-right"></span>
	</button>
</ul>