Components

• Button
• Cookie banner
• Filter
• Graph
• Highlight
• Notification
• Pagination
• Panel
• Rating
• Search form
• Search results
• Table
• Tabs
• Tag
• Time line

Pagination

A control to navigate through multiple pages when filtering search results.

Open this example in a new tab

HTML

<nav role="navigation" aria-label="Pagination">
  <div class="das-pagination__summary">
    Showing 101 - 150 of 246 results
  </div>
  <ul class="das-pagination">
    <li class="das-pagination__item">
      <a class="das-pagination__link" href="#0" aria-label="Previous page">Previous</a>
    </li>
    <li class="das-pagination__item">
      <a class="das-pagination__link" href="#0" aria-label="Page 1">1</a>
    </li>
    <li class="das-pagination__item">
      <a class="das-pagination__link" href="#0" aria-label="Page 2">2</a>
    </li>
    <li class="das-pagination__item">
      <a class="das-pagination__link current" href="#0" aria-current="true" aria-label="Page 3, current page">3</a>
    </li>
    <li class="das-pagination__item">
      <a class="das-pagination__link" href="#0" aria-label="Page 4">4</a>
    </li>
    <li class="das-pagination__item">
      <a class="das-pagination__link" href="#0" aria-label="Page 5">5</a>
    </li>
    <li class="das-pagination__item">
      <a class="das-pagination__link" href="#0" aria-label="Next page">Next</a>
    </li>
  </ul>
</nav>