DSO Component Library

# Pager: Aligned

Ready

- HTML
- View
- Context
- Info
- Notes
- WCAG

`

    <nav aria-label="Zoekresultaten pager">
        <ul class="pager">
            <li class="previous">
                <a href="#">
            Vorige
          </a>
            </li>
            <li class="next disabled">
                <a href="#">
            Volgende
          </a>
            </li>
        </ul>
    </nav>

`
`

    <nav aria-label="Zoekresultaten pager">
      <ul class="pager">
        <li class="previous{{#if firstPage}} disabled{{/if}}">
          <a href="#">
            Vorige
          </a>
        </li>
        <li class="next{{#if lastPage}} disabled{{/if}}">
          <a href="#">
            Volgende
          </a>
        </li>
      </ul>
    </nav>

`
`

    lastPage: true

`

- Handle: @pager--aligned
- Variants (3): Default , Centered Disabled , Aligned
- Preview:
  - With layout
  - Component only
- Filesystem Path: components\05-navigation\pager\pager--aligned.hbs

Standaard worden de knoppen gecentreerd. Wil je ze aan de zijkant uitlijnen, dan dien je `.previous` en `.next` te plaatsen op de `li's`.

Een pager is navigatie. Om de Bootstrap documentatie te citeren:

> #### Labelling the pagination component

> The pagination component should be wrapped in a

(https://getbootstrap.com/docs/3.3/components/#callout-pagination-label)

### 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>Pager`

### 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>`