Pagination

<nav class="pagination" aria-label="Seite wechseln">
    <ul>
        <li class="pager-item-previous"><a aria-disabled="true"><i class="bicon bicon-chevron-left" aria-hidden="true"></i></a></li>
        <li><a href="path/to/page" class="active" aria-current="page" aria-label="Seite 1"><span class="aural">Seite </span>1</a></li>
        <li><a href="path/to/page"><span class="aural">Seite </span>2</a></li>
        <li><a href="path/to/page"><span class="aural">Seite </span>3</a></li>
        <li><a href="path/to/page"><span class="aural">Seite </span>4</a></li>
        <li><a href="path/to/page"><span class="aural">Seite </span>5</a></li>
        <li><span aria-hidden="true">…</span></li>
        <li><a href="path/to/page" rel="last"><span class="aural">Seite </span>15</a></li>
        <li class="mobile-counter"><span aria-current="page" aria-label="Seite 1 von 15">1 / 15</span></li>
        <li class="pager-item-next"><a href="path/to/page" title="Eine Seite weiter" aria-label="Eine Seite weiter"><i class="bicon bicon-chevron-right" aria-hidden="true"></i></a></li>
    </ul>
</nav>

 

<nav class="pagination" aria-label="Seite wechseln">
    <ul>
        <li class="pager-item-previous"><a href="path/to/page" title="Eine Seite zurück" aria-label="Eine Seite zurück"><i class="bicon bicon-chevron-left" aria-hidden="true"></i></a></li>
        <li><a href="path/to/page" rel="first"><span class="aural">Seite </span>1</a></li>
        <li><span aria-hidden="true">…</span></li>
        <li><a href="path/to/page"><span class="aural">Seite </span>4</a></li>
        <li><a href="path/to/page" class="active" aria-current="page" aria-label="Seite 5"><span class="aural">Seite </span>5</a></li>
        <li><a href="path/to/page"><span class="aural">Seite </span>6</a></li>
        <li><span aria-hidden="true">…</span></li>
        <li><a href="path/to/page" rel="last"><span class="aural">Seite </span>15</a></li>
        <li class="mobile-counter"><span aria-current="page" aria-label="Seite 5 von 15">5 / 15</span></li>
        <li class="pager-item-next"><a href="path/to/page" title="Eine Seite weiter" aria-label="Eine Seite weiter"><i class="bicon bicon-chevron-right" aria-hidden="true"></i></a></li>
    </ul>
</nav>

 

<nav class="pagination" aria-label="Seite wechseln">
    <ul>
        <li class="pager-item-previous"><a href="path/to/page" title="Eine Seite zurück" aria-label="Eine Seite zurück"><i class="bicon bicon-chevron-left" aria-hidden="true"></i></a></li>
        <li><a href="path/to/page" rel="first"><span class="aural">Seite </span>1</a></li>
        <li><span aria-hidden="true">…</span></li>
        <li><a href="path/to/page"><span class="aural">Seite </span>11</a></li>
        <li><a href="path/to/page"><span class="aural">Seite </span>12</a></li>
        <li><a href="path/to/page"><span class="aural">Seite </span>13</a></li>
        <li><a href="path/to/page"><span class="aural">Seite </span>14</a></li>
        <li><a href="path/to/page" class="active" aria-current="page" aria-label="Seite 15"><span class="aural">Seite </span>15</a></li>
        <li class="mobile-counter"><span aria-current="page" aria-label="Seite 15 von 15">15 / 15</span></li>
        <li class="pager-item-next"><a aria-disabled="true"><i class="bicon bicon-chevron-right" aria-hidden="true"></i></a></li>
    </ul>
</nav>

 

Based on: https://design-system.w3.org/components/pagination.html