Image Specifications Style Guide Menu

Pagination

i Pagination

Markup

<div class="pagination-block">

	<ul>
		<li class="previous-button">
			<a href="#">
				<span class="visuallyhidden">Previous Page</span>
				<i class="icon icon-arrow">
	    			<svg><use xlink:href="img/spritemap.svg#icon-arrow-circle-left"></use><svg>
	   			</i>
	   		</a>
		</li>
		<li class="current"><a href="#">1</a></li>
		<li><a href="#">2</a></li>
		<li><a href="#">3</a></li>
		<li><a href="#">4</a></li>
		<li><a href="#">5</a></li>
		<li><a href="#">6</a></li>
		<li><a href="#">7</a></li>
		<li class="next-button">
			<a href="#">
				<span class="visuallyhidden">Next Page</span>
				<i class="icon icon-arrow">
    				<svg><use xlink:href="img/spritemap.svg#icon-arrow-circle"></use><svg>
   				</i>
   			</a>
		</li>

		</li>
	</ul>

	<!-- Do not implement this link -->
	<a href="/inc/modules/?module=pagination" class="module-link">
		<i class="icon info-icon">i</i>
		<span class="tool-tip">Pagination</span>
	</a>
	<!-- Do not implement this link -->

</div>

The pagination is designated to be used when more "pages" are needed to display the amount of content that can comfortably fit on a single page. Most commonly found on the search results page with the search header bar (Results Form). Ideally no more than 10 results would be displayed on the search results page.