Pagination

Elements

Pagination This element will always be aligned at the right of its container.
Show a list of available pages with arrows for easier navigation.
Show the number of search results.
25 results
Even when elements above can work isolated depending on what designer decides for the project you can also use them together.
25 results
Filters When filtering results you have to use three elements:
1. Filtering button
2. Filtering form
3. List of filters applied
Reporting Period: 05/11/18-12/11/18 Blah blah Reporting Period: 05/11/18-12/11/18 Reporting Period: 05/11/18-12/11/18 Another Filter

Samples

Simple Pagination
25 results
Module User Role
Item
Item
Item
Pagination with Filters
25 results
Reporting Period: 05/11/18-12/11/18 Blah blah Reporting Period: 05/11/18-12/11/18 Reporting Period: 05/11/18-12/11/18 Another Filter
Module User Role
Item
Item
Item

Documentation

Pagination 
<!--
ELEMENT: Pagination.
-->
<div class="sui-pagination-wrap">

	<!-- ELEMENT: Number of Results. -->
	<span class="sui-pagination-results">25 results</span>

	<!-- ELEMENT: List of Pages. -->
	<ul class="sui-pagination">


		<!-- BUTTON: Skip to first page. -->
		<li><a href="#" role="button" disabled>
			<span class="sui-icon-arrow-skip-back" aria-hidden="true"></span>
			<span class="sui-screen-reader-text">Go to first page</span>
		</a></li>

		<!-- BUTTON: Previous page. -->
		<li><a href="#" role="button" disabled>
			<span class="sui-icon-chevron-left" aria-hidden="true"></span>
			<span class="sui-screen-reader-text">Go to previous page</span>
		</a></li>

		<li class="sui-active"><a href="#" role="button">1</a></li>
		<li><a href="#" role="button">2</a></li>
		<li><a href="#" role="button">3</a></li>
		<li><a href="#" role="button">...</a></li>
		<li><a href="#" role="button">10</a></li>
		<li><a href="#" role="button">20</a></li>

		<!-- BUTTON: Next page. -->
		<li><a href="#" role="button" disabled>
			<span class="sui-icon-chevron-right" aria-hidden="true"></span>
			<span class="sui-screen-reader-text">Go to next page</span>
		</a></li>

		<!-- BUTTON: Skip to last page. -->
		<li><a href="#" role="button" disabled>
			<span class="sui-icon-arrow-skip-forward" aria-hidden="true"></span>
			<span class="sui-screen-reader-text">Go to last page</span>
		</a></li>

	</ul>

	<!-- ELEMENT: Filter Button. -->
	<button
		class="sui-button-icon sui-button-outlined sui-pagination-open-filter sui-tooltip"
		data-tooltip="Filter"
	>
		<span class="sui-icon-filter" aria-hidden="true"></span>
		<span class="sui-screen-reader-text">Click to open filtering settings</span>
	</button>

</div>
Filter Form

Place this element right after sui-pagination-wrap element.

<!-- By default this element is hidden. -->
<div class="sui-pagination-filter">
	...
</div>

<!-- Add "sui-open" class to show this element. -->
<div class="sui-pagination-filter sui-open">
	...
</div>
Filter Tags

Place this element right after sui-pagination-wrap element or in case Filter Form element exists, place it after this. NOTE: There is no need to wrap this element in a div unless you consider it necessary.

<label class="sui-label">Active Filter(s)</label>

<div class="sui-pagination-active-filters">

	<span class="sui-active-filter">
		Filter 1 label
		<span role="button" class="sui-active-filter-remove"></span>
	</span>

	<span class="sui-active-filter">
		Filter 2 label
		<span role="button" class="sui-active-filter-remove"></span>
	</span>

</div>