Style Guide

<nav role="navigation" aria-label="Pagination">
  <ul class="pagination">
      <li>
        <a class="pagination__item pagination__item--prev" href="?page=2&amp;sort_by=ranking" aria-label="Previous Page">
            <i class="icon icon-angle-left" aria-hidden="true"></i>
        </a>
      </li>
      <li>
        <a class="pagination__item " href="?page=1&amp;sort_by=ranking" aria-label="Goto Page 1">1</a>
      </li>
      <li>
        <a class="pagination__item " href="?page=2&amp;sort_by=ranking" aria-label="Goto Page 2">2</a>
      </li>
      <li>
        <a class="pagination__item pagination__item--active" href="?page=3&amp;sort_by=ranking" aria-current="true" aria-label="Goto Page 3">3</a>
      </li>
      <span class="pagination__item pagination__item--seperator">...</span>
      <li>
        <a class="pagination__item " href="?page=5&amp;sort_by=ranking" aria-label="Goto Page 5">5</a>
      </li>
      <li>
        <a class="pagination__item pagination__item--prev" href="?page=4&amp;sort_by=ranking" aria-label="Next Page">
            <i class="icon icon-angle-right" aria-hidden="true"></i>
        </a>
      </li>
  </ul>
</nav>