Pagination

On this page

# Intro

Paginations can be created by using the pagination class on a ul

<ul class="pagination">
	<li class="-disabled">
		<a href="#" tabindex="-1">Prev</a>
	</li>
	<li class="-active">
		<a href="#">1</a>
	</li>
	<li>
		<a href="#">2</a>
	</li>
	<li>
		<a href="#">3</a>
	</li>
	<li>
		<span>...</span>
	</li>
	<li>
		<a href="#">12</a>
	</li>
	<li>
		<a href="#">Next</a>
	</li>
</ul>
<ul class="pagination">
	<li>
		<a href="#" tabindex="-1">Prev</a>
	</li>
	<li>
		<a href="#">1</a>
	</li>
	<li>
		<span>...</span>
	</li>
	<li>
		<a href="#">4</a>
	</li>
	<li class="-active">
		<a href="#">5</a>
	</li>
	<li>
		<a href="#">6</a>
	</li>
	<li>
		<span>...</span>
	</li>
	<li>
		<a href="#">12</a>
	</li>
	<li>
		<a href="#">Next</a>
	</li>
</ul>

# Block

Pagination can be made to fill the parent and have flex items by using the -block modifier.

<ul class="pagination -block">
	...
</ul>

# Simple

Pagination can be simplified for pages or articles using the -prev, -next modifiers for items. To style the previous and next links subtitle and title classes can be used.

<ul class="pagination">
	<li class="-prev">
		<a href="#">
			<span class="subtitle">Previous</span>
			<span class="title h5">Getting started</span>
		</a>
	</li>
	<li class="-next">
		<a href="#">
			<span class="subtitle">Next</span>
			<span class="title h5">Layout</span>
		</a>
	</li>
</ul>