Pagination communicates the number of elements (images, articles, commentaries, pages …) that can be loaded within a given context. It shows the user where they are and enables direct access to previous and subsequent content item. It is possible to number pages and views or simply symbolise them by means of graphic elements.

The size of the pagination components depends on the basic type size used, which can adapt to the viewport width in question. As such, the size of the components is flexible. They are available in a dark and a light version.

Pagination 

Pagination is used for changing larger page content items. It can be shown in steps or without steps.

The step-based display shows all available and directly selectable pages or content items as well as the current position. The current position is shown by means of underlining and a strong contrast.

HTML
<nav class="aui-pagination aui-js-pagination">
	<ul class="aui-pagination__items">
		<li class="aui-pagination__item">
			<a class="aui-pagination__prev" href="#0">
				<i class="aui-pagination__prev-icon">
					<svg viewBox="0 0 8 13"><path d="M1.5,1 l6,6 l-6,6" /></svg>
				</i>
				<span class="aui-sr-only">Previous</span>
			</a>
		</li>
		<li class="aui-pagination__item">
			<a class="aui-pagination__link" href="#0">1</a>
		</li>
		<li class="aui-pagination__item">
			<span class="aui-pagination__ellipsis">…</span>
		</li>
		<li class="aui-pagination__item">
			<a class="aui-pagination__link" href="#0">9</a>
		</li>
		<li class="aui-pagination__item">
			<a class="aui-pagination__link is-active" href="#0">10</a>
		</li>
		<li class="aui-pagination__item">
			<a class="aui-pagination__link" href="#0">11</a>
		</li>
		<li class="aui-pagination__item">
			<span class="aui-pagination__ellipsis">…</span>
		</li>
		<li class="aui-pagination__item">
			<a class="aui-pagination__link" href="#0">20</a>
		</li>
		<li class="aui-pagination__item">
			<a class="aui-pagination__next" href="#0" disabled>
				<i class="aui-pagination__next-icon">
					<svg viewBox="0 0 8 13"><path d="M1.5,1 l6,6 l-6,6" /></svg>
				</i>
				<span class="aui-sr-only">Next</span>
			</a>
		</li>
	</ul>
</nav>
<style media="screen">
	body {
		background-color: #f2f2f2;
		padding: 50px;
	}
</style>

The stepless display shows the current position and the total number of pages or content items. The user can only navigate forwards or backwards in a linear fashion by means of arrows. This means that direct selection of a particular page or content item is not possible. The current position is emphasised by means of a strong contrast.

HTML
<nav>
	<ul class="aui-pager">
		<li class="aui-pager__item">
			<a class="aui-pager__prev" href="#0">
				<i class="aui-pager__prev-icon">
					<svg viewBox="0 0 8 13"><path d="M1.5,1 l6,6 l-6,6" /></svg>
				</i>
				<span class="aui-sr-only">Previous</span>
			</a>
		</li>
		<li class="aui-pager__item">
			<span class="aui-pager__pagination"><span class="aui-pager__current">4</span>/10</span>
		</li>
		<li class="aui-pager__item">
			<a class="aui-pager__next" href="#0">
				<span class="aui-sr-only">Next</span>
				<i class="aui-pager__next-icon">
					<svg viewBox="0 0 8 13"><path d="M1.5,1 l6,6 l-6,6" /></svg>
				</i>
			</a>
		</li>
	</ul>
</nav>

<style media="screen">
	body {
		background-color: #f2f2f2;
		padding: 50px;
	}
</style>

It is possible to omit display of the current position.

HTML
<nav>
	<ul class="aui-pager">
		<li class="aui-pager__item">
			<a class="aui-pager__prev" href="#0">
				<i class="aui-pager__prev-icon">
					<svg viewBox="0 0 8 13"><path d="M1.5,1 l6,6 l-6,6" /></svg>
				</i>
				<span class="aui-sr-only">Previous</span>
			</a>
		</li>
		<li class="aui-pager__item">
			<a class="aui-pager__next" href="#0">
				<span class="aui-sr-only">Next</span>
				<i class="aui-pager__next-icon">
					<svg viewBox="0 0 8 13"><path d="M1.5,1 l6,6 l-6,6" /></svg>
				</i>
			</a>
		</li>
	</ul>
</nav>

<style media="screen">
	body {
		background-color: #f2f2f2;
		padding: 50px;
	}
</style>

Indicator

The indicator shows the position of the user in several entries. It is used for media content shown in a  slideshow , for example. The display is in steps or without steps. It is positioned so as to be centred on media content in the lower area. Alternatively, if there is limited space, it can also appear below the media content. The current position is highlighted by means of a marked contrast.

HTML
<div class="aui-indicator aui-js-indicator">
  <ul class="aui-indicator__items">
    <li class="aui-indicator__item"><a class="aui-indicator__action" href="#" class="is-active">1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</a></li>
    <li class="aui-indicator__item"><a class="aui-indicator__action" href="#">2</a></li>
    <li class="aui-indicator__item"><a class="aui-indicator__action" href="#">3</a></li>
    <li class="aui-indicator__item"><a class="aui-indicator__action" href="#">4</a></li>
    <li class="aui-indicator__item"><a class="aui-indicator__action" href="#">5</a></li>
    <li class="aui-indicator__item"><a class="aui-indicator__action" href="#">6</a></li>
  </ul>
</div>
<style media="screen">
	body {
		background-color: #f2f2f2;
		padding: 90px;
	}
</style>
Audi UI Kit Sketch
Version 1.4 (Releases: <a href="https://github.com/audi/audi-templates/releases" target="_blank">https://github.com/audi/audi-templates/releases</a>)
ZIP
76.3 MB

Examples

Don’ts

Don't place indicator against a red background.
Don't place pagination against a red background.
Don't place pagination against a red background.