Pagination Component

The traditional paging to divide content into numbered pages or indicate that there is a series of related content on several pages.

This component does not include custom colors. It is only available in blue.


Example:
<nav class="e-pagination" aria-label="pagination">

  <div class="e-page-content">
    <a class="e-page-item">Previous</a>
    <a class="e-page-item">Next page</a>
  </div>

  <ul class="e-page-content">
    <li class="e-page-item">
      <a aria-label="Goto page 1">1</a>
    </li>
    <li class="e-page-item on-page">
      <a aria-label="Goto page 2">2</a>
    </li>
  </ul>

</nav>
Disabled:
<nav class="e-pagination" aria-label="pagination">

  <ul class="e-page-content">
    <li class="e-page-item">
      <a aria-label="Goto page 1">1</a>
    </li>
    <li class="e-page-item on-page">
      <a aria-label="Goto page 2">2</a>
    </li>
  </ul>

  <div class="e-page-content">
    <a class="e-page-item" disabled>Previous</a>
    <a class="e-page-item">Next page</a>
  </div>

</nav>
Variations
<nav class="e-pagination" aria-label="pagination">
  <a class="e-page-item" disabled>Previous</a>

  <ul class="e-page-content">
    <li class="e-page-item">
      <a aria-label="Goto page 1">1</a>
    </li>
    <li class="e-page-item on-page">
      <a aria-label="Goto page 2">2</a>
    </li>
  </ul>

  <a class="e-page-item">Next page</a>
</nav>
Unified

Add unified to unify container elements e-page-content

<nav class="e-pagination" aria-label="pagination">
  <ul class="e-page-content unified">
    <a class="e-page-item" disabled>Previous</a>
    <li class="e-page-item">
      <a aria-label="Goto page 1">1</a>
    </li>
    <li class="e-page-item on-page">
      <a aria-label="Goto page 2">2</a>
    </li>
    <a class="e-page-item">Next page</a>
  </ul>
</nav>
<nav class="e-pagination" aria-label="pagination">
  <div class="e-page-content unified">
    <a class="e-page-item">Previous</a>
    <a class="e-page-item">Next page</a>
  </div>

  <ul class="e-page-content">
    <li class="e-page-item">
      <a aria-label="Goto page 1">1</a>
    </li>
    <li class="e-page-item on-page">
      <a aria-label="Goto page 2">2</a>
    </li>
  </ul>
</nav>
Sizes

Add different sizes to the page.

small
<nav class="e-pagination small" aria-label="pagination">

  <ul class="e-page-content">
    <li class="e-page-item">
      <a aria-label="Goto page 1">1</a>
    </li>
  </ul>

</nav>
plus
<nav class="e-pagination plus" aria-label="pagination">

  <ul class="e-page-content">
    <li class="e-page-item">
      <a aria-label="Goto page 1">1</a>
    </li>
  </ul>

</nav>
Alignments

Change the alignment of pagination components with Alignments utilities.

Centered
<nav class="e-pagination centered" aria-label="pagination">
  <ul class="e-page-content">
    <li class="e-page-item">
      <a aria-label="Goto page 1">1</a>
    </li>
  </ul>
</nav>
Align-end
<nav class="e-pagination align-end" aria-label="pagination">
  <ul class="e-page-content">
    <li class="e-page-item">
      <a aria-label="Goto page 1">1</a>
    </li>
  </ul>
</nav>
Contribute on GitHub
Become a sponsor.

If you are using our framework in a product that generates income, you can also help its maintenance if you wish, if you frequently help in your company or personal developments consider making a recurring donation.

If you want to see your company's logo on this site it's time to be a serious Sponsor.

eFrolic | framework css 2018
eFrolic | framework css 2018

One-time donation


Donate
eFrolic | framework css 2018
eFrolic | framework css 2018

Serious sponsor


Become a Patron