DSO Component Library

Pagination 

<!-- Large -->
<nav aria-label="Page navigation">
    <ul class="pagination pagination-lg">
        <li>
            <a href="#" aria-label="Vorige">
        <span aria-hidden="true">&laquo;</span>
      </a>
        </li>
        <li>
            <a href="#">1</a>
        </li>
        <li>
            <a href="#">2</a>
        </li>
        <li>
            <a href="#">3</a>
        </li>
        <li>
            <a href="#">4</a>
        </li>
        <li>
            <a href="#">5</a>
        </li>
        <li>
            <a href="#" aria-label="Volgende">
        <span aria-hidden="true">&raquo;</span>
      </a>
        </li>
    </ul>
</nav>


<!-- Normal -->
<nav aria-label="Page navigation">
    <ul class="pagination ">
        <li>
            <a href="#" aria-label="Vorige">
        <span aria-hidden="true">&laquo;</span>
      </a>
        </li>
        <li>
            <a href="#">1</a>
        </li>
        <li>
            <a href="#">2</a>
        </li>
        <li>
            <a href="#">3</a>
        </li>
        <li>
            <a href="#">4</a>
        </li>
        <li>
            <a href="#">5</a>
        </li>
        <li>
            <a href="#" aria-label="Volgende">
        <span aria-hidden="true">&raquo;</span>
      </a>
        </li>
    </ul>
</nav>


<!-- Small -->
<nav aria-label="Page navigation">
    <ul class="pagination pagination-sm">
        <li>
            <a href="#" aria-label="Vorige">
        <span aria-hidden="true">&laquo;</span>
      </a>
        </li>
        <li>
            <a href="#">1</a>
        </li>
        <li>
            <a href="#">2</a>
        </li>
        <li>
            <a href="#">3</a>
        </li>
        <li>
            <a href="#">4</a>
        </li>
        <li>
            <a href="#">5</a>
        </li>
        <li>
            <a href="#" aria-label="Volgende">
        <span aria-hidden="true">&raquo;</span>
      </a>
        </li>
    </ul>
</nav>


<nav aria-label="Page navigation">
  <ul class="pagination {{ modifier }}">
    <li>
      <a href="#" aria-label="Vorige">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    {{#each items }}
      <li>
        <a href="#">{{ this }}</a>
      </li>
    {{/each}}
    <li>
      <a href="#" aria-label="Volgende">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>
 
/* Large */
items:
  - 1
  - 2
  - 3
  - 4
  - 5
modifier: pagination-lg



/* Normal */
items:
  - 1
  - 2
  - 3
  - 4
  - 5



/* Small */
items:
  - 1
  - 2
  - 3
  - 4
  - 5
modifier: pagination-sm

There are no notes for this item.

WARNING: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage

This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1.

<span aria-hidden="true">«</span>

NOTICE: WCAG2AA.Principle2.Guideline2_4.2_4_2.H25.2

Check that the title element describes the document.

<title>Pagination

NOTICE: WCAG2AA.Principle2.Guideline2_4.2_4_4.H77,H78,H79,H80,H81

Check that the link text combined with programmatically determined link context identifies the purpose of the link.

<a href="#" aria-label="Vorige"> <span aria-hidden="true">«</span> </a>