Pleasance Styleguide

Pager 

<nav class="pager" role="navigation" aria-labelledby="pagination-heading">
    <h2 id="pagination-heading" class="visually-hidden">Pagination</h2>
    <ul class="pager__items js-pager__items pagination">
        <li class="pager__item page-item pager__item--first">
            <a class="page-link" href="#" title="Go to first page">
                <span class="visually-hidden">First page</span>
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>
        <li class="pager__item page-item pager__item--previous">
            <a class="page-link" href="#" title="Go to previous page" rel="prev">
                <span class="visually-hidden">Previous page</span>
                <span aria-hidden="true">&lsaquo;</span>
            </a>
        </li>
        <li class="pager__item page-item">
            <a class="page-link" href="#" title="Go to page 130">
                <span class="visually-hidden">
                    Page
                </span>130</a>
        </li>
        <li class="pager__item page-item is-active active">
            <a class="page-link" href="#" title="Current page" aria-current="page">
                <span class="visually-hidden">
                    Page
                </span>131</a>
        </li>
        <li class="pager__item page-item">
            <a class="page-link" href="#" title="Go to page 132">
                <span class="visually-hidden">
                    Page
                </span>132</a>
        </li>
        <li class="pager__item page-item pager__item--next">
            <a class="page-link" href="#" title="Go to next page" rel="next">
                <span class="visually-hidden">Next page</span>
                <span aria-hidden="true">&rsaquo;</span>
            </a>
        </li>
        <li class="pager__item page-item pager__item--last">
            <a class="page-link" href="#" title="Go to last page">
                <span class="visually-hidden">Last page</span>
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
    </ul>
</nav>
 
<nav class="pager" role="navigation" aria-labelledby="pagination-heading">
  <h2 id="pagination-heading" class="visually-hidden">Pagination</h2>
  <ul class="pager__items js-pager__items pagination">
    <li class="pager__item page-item pager__item--first">
      <a class="page-link" href="#" title="Go to first page">
        <span class="visually-hidden">First page</span>
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li class="pager__item page-item pager__item--previous">
      <a class="page-link" href="#" title="Go to previous page" rel="prev">
        <span class="visually-hidden">Previous page</span>
        <span aria-hidden="true">&lsaquo;</span>
      </a>
    </li>
    <li class="pager__item page-item">
      <a class="page-link" href="#" title="Go to page 130">
        <span class="visually-hidden">
          Page
        </span>130</a>
    </li>
    <li class="pager__item page-item is-active active">
      <a class="page-link" href="#" title="Current page" aria-current="page">
        <span class="visually-hidden">
          Page
        </span>131</a>
    </li>
    <li class="pager__item page-item">
      <a class="page-link" href="#" title="Go to page 132">
        <span class="visually-hidden">
          Page
        </span>132</a>
    </li>
    <li class="pager__item page-item pager__item--next">
      <a class="page-link" href="#" title="Go to next page" rel="next">
        <span class="visually-hidden">Next page</span>
        <span aria-hidden="true">&rsaquo;</span>
      </a>
    </li>
    <li class="pager__item page-item pager__item--last">
      <a class="page-link" href="#" title="Go to last page">
        <span class="visually-hidden">Last page</span>
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>
 
/* No context defined. */

No notes defined.