Awesomeness

Pagination

Very simple pagination component for search result and similar pages.

Example

  2. 1
  3. 2
  4. 3
  5. 4
  6. 5

Imports

  • SASS:
    @import "base";
@import "imports/modules/button";
@import "imports/modules/pagination";

Code

<ol class="nav pagination">
	<li class="pagination__item pagination__item--prev">
		<a class="pagination__link" href><i class="fa fa-chevron-left"></i></a>
	</li>
	<li class="pagination__item pagination__item--first">
		<a class="pagination__link" href>1</a>
	</li>
	<li class="pagination__item">
		<a class="pagination__link" href>2</a>
	</li>
	<li class="pagination__item pagination__item--active">
		<a class="pagination__link" href>3</a>
	</li>
	<li class="pagination__item">
		<a class="pagination__link" href>4</a>
	</li>
	<li class="pagination__item pagination__item--last">
		<a class="pagination__link" href>5</a>
	</li>
	<li class="pagination__item pagination__item--next">
		<a class="pagination__link" href><i class="fa fa-chevron-right"></i></a>
	</li>
</ol>