Pagination

In progress

Pagination

Example

  <hy-pager>
    <hy-pager-item
      variant="previous"
      item-label="Previous"
      item-url="https://helsinki.fi/sv/utbildning/program?page=1"
    >
    </hy-pager-item>
    <hy-pager-item
      variant="current"
      item-label="1"
      item-url="https://helsinki.fi/sv/utbildning/program"
    >
    </hy-pager-item>
    <hy-pager-item
      item-label="2"
      item-url="https://helsinki.fi/sv/utbildning/program?page=1"
      sc-aria-label="Go to page 2"
    >
    </hy-pager-item>
    <hy-pager-item
      item-label="3"
      item-url="https://helsinki.fi/sv/utbildning/program?page=2"
      sc-aria-label="Go to page 3"
    >
    </hy-pager-item>
    <hy-pager-item
      item-label="4"
      item-url="https://helsinki.fi/sv/utbildning/program?page=3"
      sc-aria-label="Go to page 4"
    >
    </hy-pager-item>
    <hy-pager-item variant="ellipsis" item-label="..."> </hy-pager-item>
    <hy-pager-item variant="next" item-label="Next" item-url="https://helsinki.fi/sv/utbildning/program?page=1">
    </hy-pager-item>
  </hy-pager>

---

Helsinki University Design System