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.