Pagination – Design Portal

Pagination is the method of separating content into different pages on a website.

Demo

<nav class="pagination flex justify-center" aria-label="Content pages">
  <a href="https://science.howstuffworks.com/lsd1.htm" class="items-center justify-center border border-tan text-sm font-bold transition-colors duration-300 ease-in-out min-h-3 min-w-3 lg:min-h-2 lg:min-w-2 hover:bg-lighter-gray flex text-accent-1 w-8 h-8 prev" rel="prev" data-page="1" data-track-gtm="Prev" aria-label="Previous">
    <svg class="fill-current -scale-100" xmlns="http://www.w3.org/2000/svg" width="20" height="13" viewBox="0 0 25.989 17.333"><title>Previous</title><path d="M24.449,11.584a1.18,1.18,0,0,0-.009,1.661l5.489,5.5H9.04a1.174,1.174,0,0,0,0,2.347h20.88l-5.489,5.5a1.188,1.188,0,0,0,.009,1.661,1.169,1.169,0,0,0,1.652-.009l7.438-7.493h0a1.318,1.318,0,0,0,.244-.37,1.12,1.12,0,0,0,.09-.451,1.177,1.177,0,0,0-.334-.821l-7.438-7.493A1.15,1.15,0,0,0,24.449,11.584Z" transform="translate(-7.875 -11.252)"></path></svg>
  </a>
  <a class="items-center justify-center border border-tan text-sm font-bold transition-colors duration-300 ease-in-out min-h-3 min-w-3 lg:min-h-2 lg:min-w-2 hover:bg-lighter-gray border-l-0 flex" href="https://science.howstuffworks.com/lsd.htm" data-page="0">1</a>
  <a class="items-center justify-center border border-tan text-sm font-bold transition-colors duration-300 ease-in-out min-h-3 min-w-3 lg:min-h-2 lg:min-w-2 hover:bg-lighter-gray border-l-0 flex" href="https://science.howstuffworks.com/lsd1.htm" data-page="1">2</a>
  <span class="items-center justify-center border border-tan text-sm font-bold transition-colors duration-300 ease-in-out min-h-3 min-w-3 lg:min-h-2 lg:min-w-2 border-l-0 flex bg-accent-1 text-white current" aria-disabled="true" aria-current="page">3</span>																													
  <a class="items-center justify-center border border-tan text-sm font-bold transition-colors duration-300 ease-in-out min-h-3 min-w-3 lg:min-h-2 lg:min-w-2 hover:bg-lighter-gray border-l-0 flex" href="https://science.howstuffworks.com/lsd3.htm" data-page="3">4</a>
  <span class="items-center justify-center border border-tan text-sm font-bold transition-colors duration-300 ease-in-out min-h-3 min-w-3 lg:min-h-2 lg:min-w-2 border-l-0 flex dots" aria-hidden="true">…</span>
  <a class="items-center justify-center border border-tan text-sm font-bold transition-colors duration-300 ease-in-out min-h-3 min-w-3 lg:min-h-2 lg:min-w-2 hover:bg-lighter-gray border-l-0 hidden" href="https://science.howstuffworks.com/lsd4.htm" data-page="4">5</a>
  <a class="items-center justify-center border border-tan text-sm font-bold transition-colors duration-300 ease-in-out min-h-3 min-w-3 lg:min-h-2 lg:min-w-2 hover:bg-lighter-gray border-l-0 hidden" href="https://science.howstuffworks.com/lsd5.htm" data-page="5">6</a>
  <a class="items-center justify-center border border-tan text-sm font-bold transition-colors duration-300 ease-in-out min-h-3 min-w-3 lg:min-h-2 lg:min-w-2 hover:bg-lighter-gray border-l-0 hidden" href="https://science.howstuffworks.com/lsd6.htm" data-page="6">7</a>
  <a class="items-center justify-center border border-tan text-sm font-bold transition-colors duration-300 ease-in-out min-h-3 min-w-3 lg:min-h-2 lg:min-w-2 hover:bg-lighter-gray border-l-0 hidden" href="https://science.howstuffworks.com/lsd7.htm" data-page="7">8</a>
  <a class="items-center justify-center border border-tan text-sm font-bold transition-colors duration-300 ease-in-out min-h-3 min-w-3 lg:min-h-2 lg:min-w-2 hover:bg-lighter-gray border-l-0 hidden md:flex" href="https://science.howstuffworks.com/lsd8.htm" data-page="8">9</a>
  <a href="https://science.howstuffworks.com/lsd3.htm" class="items-center justify-center border border-tan text-sm font-bold transition-colors duration-300 ease-in-out min-h-3 min-w-3 lg:min-h-2 lg:min-w-2 hover:bg-lighter-gray border-l-0 flex text-accent-1 w-8 h-8 next" rel="next" data-page="3" data-track-gtm="Next" aria-label="Next Page">
    <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="20" height="13" viewBox="0 0 25.989 17.333"><title>Next Page</title><path d="M24.449,11.584a1.18,1.18,0,0,0-.009,1.661l5.489,5.5H9.04a1.174,1.174,0,0,0,0,2.347h20.88l-5.489,5.5a1.188,1.188,0,0,0,.009,1.661,1.169,1.169,0,0,0,1.652-.009l7.438-7.493h0a1.318,1.318,0,0,0,.244-.37,1.12,1.12,0,0,0,.09-.451,1.177,1.177,0,0,0-.334-.821l-7.438-7.493A1.15,1.15,0,0,0,24.449,11.584Z" transform="translate(-7.875 -11.252)"></path></svg>
  </a>
</nav>

/* HSW components use Tailwind! 
Individual utility classes are added to the HTML. */

No JS! 😀

Anatomy

Pagination
Pagination Button Previous
Pagination Page Number
Pagination Page Current
Pagination Dots
Pagination Button Next