Pagination

Used to navigate between content within a block. If a block contains too much information, it can be split up. By adding this component, the user can navigate between the seperated content blocks. This can for example be used within tables that are too long to present in one page.

Default

px 

			
				<div class="c-pagination ">
	<a class="c-pagination__button c-pagination__button--previous u-visually-hidden">
		<div class="c-icon c-pagination__icon c-pagination__icon--previous">
			<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
				<path fill-rule="evenodd" clip-rule="evenodd" d="M0.342857 12.8L20.8017 12.8L18.8866 14.7152L19.8563 15.6849L23.1134 12.4278L23.5983 11.9429L23.1134 11.458L19.8563 8.20087L18.8866 9.17061L21.1445 11.4286L1.71429 11.4286V8.34284H0.342857V11.4286V12.1143V12.8Z" />
			</svg>
		</div>
	</a>
	<a class="c-pagination__number-button ">
		<span class="c-pagination__number">1</span>
	</a>
	<a class="c-pagination__number-button is-active">
		<span class="c-pagination__number">2</span>
	</a>
	<a class="c-pagination__number-button ">
		<span class="c-pagination__number">3</span>
	</a>
	<a class="c-pagination__number-button ">
		<span class="c-pagination__number">4</span>
	</a>
	<a class="c-pagination__number-button ">
		<span class="c-pagination__number">5</span>
	</a>
	<a class="c-pagination__button c-pagination__button--next ">
		<div class="c-icon c-pagination__icon c-pagination__icon--next">
			<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
				<path fill-rule="evenodd" clip-rule="evenodd" d="M0.342857 12.8L20.8017 12.8L18.8866 14.7152L19.8563 15.6849L23.1134 12.4278L23.5983 11.9429L23.1134 11.458L19.8563 8.20087L18.8866 9.17061L21.1445 11.4286L1.71429 11.4286V8.34284H0.342857V11.4286V12.1143V12.8Z" />
			</svg>
		</div>
	</a>
</div>
<div class="c-pagination ">
	<a class="c-pagination__button c-pagination__button--previous ">
		<div class="c-icon c-pagination__icon c-pagination__icon--previous">
			<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
				<path fill-rule="evenodd" clip-rule="evenodd" d="M0.342857 12.8L20.8017 12.8L18.8866 14.7152L19.8563 15.6849L23.1134 12.4278L23.5983 11.9429L23.1134 11.458L19.8563 8.20087L18.8866 9.17061L21.1445 11.4286L1.71429 11.4286V8.34284H0.342857V11.4286V12.1143V12.8Z" />
			</svg>
		</div>
	</a>
	<a class="c-pagination__number-button ">
		<span class="c-pagination__number">1</span>
	</a>
	<a class="c-pagination__number-button ">
		<span class="c-pagination__number">2</span>
	</a>
	<a class="c-pagination__number-button is-active">
		<span class="c-pagination__number">3</span>
	</a>
	<a class="c-pagination__number-button ">
		<span class="c-pagination__number">4</span>
	</a>
	<a class="c-pagination__number-button ">
		<span class="c-pagination__number">5</span>
	</a>
	<a class="c-pagination__button c-pagination__button--next ">
		<div class="c-icon c-pagination__icon c-pagination__icon--next">
			<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
				<path fill-rule="evenodd" clip-rule="evenodd" d="M0.342857 12.8L20.8017 12.8L18.8866 14.7152L19.8563 15.6849L23.1134 12.4278L23.5983 11.9429L23.1134 11.458L19.8563 8.20087L18.8866 9.17061L21.1445 11.4286L1.71429 11.4286V8.34284H0.342857V11.4286V12.1143V12.8Z" />
			</svg>
		</div>
	</a>
</div>
<div class="c-pagination ">
	<a class="c-pagination__button c-pagination__button--previous ">
		<div class="c-icon c-pagination__icon c-pagination__icon--previous">
			<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
				<path fill-rule="evenodd" clip-rule="evenodd" d="M0.342857 12.8L20.8017 12.8L18.8866 14.7152L19.8563 15.6849L23.1134 12.4278L23.5983 11.9429L23.1134 11.458L19.8563 8.20087L18.8866 9.17061L21.1445 11.4286L1.71429 11.4286V8.34284H0.342857V11.4286V12.1143V12.8Z" />
			</svg>
		</div>
	</a>
	<a class="c-pagination__number-button ">
		<span class="c-pagination__number">1</span>
	</a>
	<a class="c-pagination__number-button ">
		<span class="c-pagination__number">2</span>
	</a>
	<a class="c-pagination__number-button ">
		<span class="c-pagination__number">3</span>
	</a>
	<a class="c-pagination__number-button is-active">
		<span class="c-pagination__number">4</span>
	</a>
	<a class="c-pagination__number-button ">
		<span class="c-pagination__number">5</span>
	</a>
	<a class="c-pagination__button c-pagination__button--next ">
		<div class="c-icon c-pagination__icon c-pagination__icon--next">
			<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
				<path fill-rule="evenodd" clip-rule="evenodd" d="M0.342857 12.8L20.8017 12.8L18.8866 14.7152L19.8563 15.6849L23.1134 12.4278L23.5983 11.9429L23.1134 11.458L19.8563 8.20087L18.8866 9.17061L21.1445 11.4286L1.71429 11.4286V8.34284H0.342857V11.4286V12.1143V12.8Z" />
			</svg>
		</div>
	</a>
</div>
<div class="c-pagination ">
	<a class="c-pagination__button c-pagination__button--previous ">
		<div class="c-icon c-pagination__icon c-pagination__icon--previous">
			<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
				<path fill-rule="evenodd" clip-rule="evenodd" d="M0.342857 12.8L20.8017 12.8L18.8866 14.7152L19.8563 15.6849L23.1134 12.4278L23.5983 11.9429L23.1134 11.458L19.8563 8.20087L18.8866 9.17061L21.1445 11.4286L1.71429 11.4286V8.34284H0.342857V11.4286V12.1143V12.8Z" />
			</svg>
		</div>
	</a>
	<a class="c-pagination__number-button ">
		<span class="c-pagination__number">1</span>
	</a>
	<a class="c-pagination__number-button ">
		<span class="c-pagination__number">2</span>
	</a>
	<a class="c-pagination__number-button ">
		<span class="c-pagination__number">3</span>
	</a>
	<a class="c-pagination__number-button ">
		<span class="c-pagination__number">4</span>
	</a>
	<a class="c-pagination__number-button is-active">
		<span class="c-pagination__number">5</span>
	</a>
	<a class="c-pagination__button c-pagination__button--next ">
		<div class="c-icon c-pagination__icon c-pagination__icon--next">
			<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
				<path fill-rule="evenodd" clip-rule="evenodd" d="M0.342857 12.8L20.8017 12.8L18.8866 14.7152L19.8563 15.6849L23.1134 12.4278L23.5983 11.9429L23.1134 11.458L19.8563 8.20087L18.8866 9.17061L21.1445 11.4286L1.71429 11.4286V8.34284H0.342857V11.4286V12.1143V12.8Z" />
			</svg>
		</div>
	</a>
</div>
<div class="c-pagination ">
	<a class="c-pagination__button c-pagination__button--previous ">
		<div class="c-icon c-pagination__icon c-pagination__icon--previous">
			<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
				<path fill-rule="evenodd" clip-rule="evenodd" d="M0.342857 12.8L20.8017 12.8L18.8866 14.7152L19.8563 15.6849L23.1134 12.4278L23.5983 11.9429L23.1134 11.458L19.8563 8.20087L18.8866 9.17061L21.1445 11.4286L1.71429 11.4286V8.34284H0.342857V11.4286V12.1143V12.8Z" />
			</svg>
		</div>
	</a>
	<a class="c-pagination__number-button ">
		<span class="c-pagination__number">1</span>
	</a>
	<a class="c-pagination__number-button ">
		<span class="c-pagination__number">2</span>
	</a>
	<a class="c-pagination__number-button ">
		<span class="c-pagination__number">3</span>
	</a>
	<a class="c-pagination__number-button ">
		<span class="c-pagination__number">4</span>
	</a>
	<a class="c-pagination__number-button ">
		<span class="c-pagination__number">5</span>
	</a>
	<a class="c-pagination__button c-pagination__button--next u-visually-hidden">
		<div class="c-icon c-pagination__icon c-pagination__icon--next">
			<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
				<path fill-rule="evenodd" clip-rule="evenodd" d="M0.342857 12.8L20.8017 12.8L18.8866 14.7152L19.8563 15.6849L23.1134 12.4278L23.5983 11.9429L23.1134 11.458L19.8563 8.20087L18.8866 9.17061L21.1445 11.4286L1.71429 11.4286V8.34284H0.342857V11.4286V12.1143V12.8Z" />
			</svg>
		</div>
	</a>
</div>

Documentation

States

  • is-hidden

    Hides the arrow to navigate between pages when the range of the pagination includes the first or last page available.

  • is-active

    Highlights the index of the current page the user is viewing.