Day 19: Pagination 📖

Pagination helps users browse through the sequence of related content.

The example component is visible below.

A few notes about this pagination component:

• CSS Variables are used for colors,
• CSS Flexbox is used for layout,
• the gap property is used to add spacing between flex items,
• the advent-pagination a[aria-current="true"] selector is used to target the current pagination item,
• aria-label and aria-current attributes are used to make the component accessible.

The code:

<nav class="advent-pagination" aria-label="Pagination navigation">
  <ul>
    <li><a href="#page-1" aria-label="Go to first page">First</a></li>
    <li><a href="#page-1" aria-label="Go to page 2">2</a></li>
    <li><a href="#page-3" aria-label="Current page, page 3" aria-current="true">3</a></li>
    <li><a href="#page-4" aria-label="Go to page 4">4</a></li>
    <li><a href="#page-100" aria-label="Go to last page">Last</a></li>
  </ul>
</nav>

.advent-pagination {
  --color-xmas-alpha: #f7efef;
  --color-xmas-beta: #d72621;
  --color-xmas-gamma: #639565;
}

.advent-pagination ul {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
}

advent-pagination a {
  background-color: var(--color-xmas-alpha);
  color: var(--color-xmas-beta);
  border: 1px solid var(--color-xmas-beta);
  border-radius: .25em;
  display: block;
  padding: .25em 1em;
  text-decoration: none;
  cursor: pointer;
}

advent-pagination a:hover,
advent-pagination a:focus,
advent-pagination a:active {
  background-color: var(--color-xmas-beta);
  color: var(--color-xmas-alpha);
}

.advent-pagination li:first-of-type a {
  border-top-left-radius: 1.5em;
  border-bottom-left-radius: 1.5em;
  padding-left: 1.5em;
}

.advent-pagination li:last-of-type a {
  border-top-right-radius: 1.5em;
  border-bottom-right-radius: 1.5em;
  padding-right: 1.5em;
}

advent-pagination a[aria-current="true"] {
  border-width: 3px;
}