@pnx-mixtape/pagination

Documentation and examples: Pagination

Installation

npm install @pnx-mixtape/pagination --save

How to use

CSS

• PostCSS workflow: @import '@pnx-mixtape/pagination';
• Native CSS: @import url('dist/pagination.css');
• Link tag: <link href="dist/pagination.css" rel="stylesheet" type="text/css">

HTML

<nav aria-label="Pagination" class="pagination" role="navigation">
  <ul class="pagination__items">
    <li class="pagination__previous">
      <a href="#" class="icon icon--arrow-left">Previous</a>
    </li>
    <li class="pagination__item"><a href="#">1</a></li>
    <li aria-current="page" class="pagination__item pagination__item--active">
      2
    </li>
    <li class="pagination__next">
      <a href="#" class="icon icon--arrow-right">Next</a>
    </li>
  </ul>
</nav>