DSO Component Library

Pagination: 4 4 

<ul class="dso-pagination">
    <li class="dso-previous" title="Vorige">
        <a href="#">Vorige</a>
    </li>
    <li>
        <a href="#">1</a>
    </li>
    <li>
        <a href="#" class="minTwee">2</a>
    </li>
    <li>
        <a href="#" class="minEen">3</a>
    </li>
    <li class="active">
        <span>4</span>
    </li>
</ul>
 
<ul class="dso-pagination">
  {{#if (ne current 1) }}
    <li class="dso-previous" title="Vorige">
      <a href="#">Vorige</a>
    </li>
    <li>
      <a href="#">1</a>
    </li>
  {{/if}}
  {{#if (and (gt current 3) (gte count 5)) }}
    <li>
      {{#if (eq count 5)}}
        <a href="#">2</a>
      {{else}}
        <span>...</span>
      {{/if}}
    </li>
  {{/if}}
  {{#if (or (ne current count) (gte count 4))}}
    {{#if (and (eq current count) (ne current 1)) }}
      <li>
        <a href="#" class="minTwee">{{subtract current 2 }}</a>
      </li>
    {{/if}}
  {{/if}}
  {{#if (and (gte current 3) (or (and (gte current 3) (lte count 5)) (and (gt count 5) (ne current (subtract count 2 )) ) )) }}
    <li {{#if (and (gte current 4) (lt current (subtract count 2))) }}class="previous"{{/if}}>
      <a href="#" class="minEen">{{subtract current 1 }}</a>
    </li>
  {{/if}}
  <li class="active">
    <span>{{ current }}</span>
  </li>
  {{#if (and (lte current (subtract count 2 )) (or (and (lte current 3) (lte count 5)) (and (ne current 3) (gt count 5)) ) ) }}
    <li {{#if (and (gte current 4) (lt current (subtract count 2))) }}class="next"{{/if}}>
      <a href="#">{{add current 1 }}</a>
    </li>
  {{/if}}
  {{#if (and (eq current 1) (gt count (add current 2))) }}
    <li>
      <a href="#">{{add current 2 }}</a>
    </li>
  {{/if}}
  {{#if (and (lte current (subtract count 3)) (gte count 5) ) }}
    <li>
      {{#if (eq count 5)}}
        <a href="#">{{ subtract count 1 }}</a>
      {{else}}
        <span>...</span>
      {{/if}}
    </li>
  {{/if}}
  {{#if (ne current count)}}
    <li>
      <a href="#">{{ count }}</a>
    </li>
    <li class="dso-next" title="Volgende">
      <a href="#">Volgende</a>
    </li>
  {{/if}}
</ul>
 
count: 4
current: 4
__title: 4 pagina's
__explanation: pagina 4 geselecteerd

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.

<a href="#">Vorige</a>

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="#">Vorige</a>