Demo
Usage
<nav class="pagination-pattern" role="navigation" aria-labelledby="pagination-heading">
<h4 id="pagination-heading" class="visually-hidden">Pagination</h4>
<ul>
<li class="pager__item pager__item--first"><a class="large-viewport-pagination" href="?page=0" title="Go to first page" rel="first"><span class="visually-hidden">First page</span><span aria-hidden="true"><svg width="12" height="20" viewBox="0 0 12 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.70711 5.29289C6.09763 5.68342 6.09763 6.31658 5.70711 6.70711L2.41421 10L5.70711 13.2929C6.09763 13.6834 6.09763 14.3166 5.70711 14.7071C5.31658 15.0976 4.68342 15.0976 4.29289 14.7071L0.292893 10.7071C-0.0976311 10.3166 -0.0976311 9.68342 0.292893 9.29289L4.29289 5.29289C4.68342 4.90237 5.31658 4.90237 5.70711 5.29289Z" fill="currentColor"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.7071 5.29289C12.0976 5.68342 12.0976 6.31658 11.7071 6.70711L8.41421 10L11.7071 13.2929C12.0976 13.6834 12.0976 14.3166 11.7071 14.7071C11.3166 15.0976 10.6834 15.0976 10.2929 14.7071L6.29289 10.7071C5.90237 10.3166 5.90237 9.68342 6.29289 9.29289L10.2929 5.29289C10.6834 4.90237 11.3166 4.90237 11.7071 5.29289Z" fill="currentColor"></path>
</svg></span></a></li>
<li class="pager__item pager__item--previous"><a class="large-viewport-pagination" href="?page=3" title="Go to previous page" rel="prev"><span class="visually-hidden">Previous page</span><span aria-hidden="true"><svg width="6" height="20" viewBox="0 0 6 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.70711 5.29289C6.09763 5.68342 6.09763 6.31658 5.70711 6.70711L2.41421 10L5.70711 13.2929C6.09763 13.6834 6.09763 14.3166 5.70711 14.7071C5.31658 15.0976 4.68342 15.0976 4.29289 14.7071L0.292893 10.7071C-0.0976311 10.3166 -0.0976311 9.68342 0.292893 9.29289L4.29289 5.29289C4.68342 4.90237 5.31658 4.90237 5.70711 5.29289Z" fill="currentColor"></path>
</svg></span></a><a class="btn btn-secondary " data-bs-target="#undefined" href="?page=3" title="Go to previous page"><svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.49012e-08 10C1.49012e-08 9.44772 0.447715 9 1 9H15C15.5523 9 16 9.44772 16 10C16 10.5523 15.5523 11 15 11H1C0.447715 11 1.49012e-08 10.5523 1.49012e-08 10Z" fill="currentColor"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.70711 4.29289C7.09763 4.68342 7.09763 5.31658 6.70711 5.70711L2.41421 10L6.70711 14.2929C7.09763 14.6834 7.09763 15.3166 6.70711 15.7071C6.31658 16.0976 5.68342 16.0976 5.29289 15.7071L0.292893 10.7071C-0.0976311 10.3166 -0.0976311 9.68342 0.292893 9.29289L5.29289 4.29289C5.68342 3.90237 6.31658 3.90237 6.70711 4.29289Z" fill="currentColor"></path>
</svg>Previous page</a></li>
<li class="pager__item"><a class="large-viewport-pagination" href="?page=0" title="Current page" aria-current="page"><span class="visually-hidden"> Page </span>1</a></li>
<li class="pager__item"><a class="large-viewport-pagination" href="?page=1" title="Go to page 2"><span class="visually-hidden"> Page </span>2</a></li>
<li class="pager__item"><a class="large-viewport-pagination" href="?page=2" title="Go to page 3"><span class="visually-hidden"> Page </span>3</a></li>
<li class="pager__item is-active active"><a class="large-viewport-pagination" href="?page=3" title="Go to page 4"><span class="visually-hidden"> Current page </span>4</a></li>
<li class="pager__item"><a class="large-viewport-pagination" href="?page=4" title="Go to page 5"><span class="visually-hidden"> Page </span>5</a></li>
<li class="pager__item"><a class="large-viewport-pagination" href="?page=5" title="Go to page 6"><span class="visually-hidden"> Page </span>6</a></li>
<li class="pager__item"><a class="large-viewport-pagination" href="?page=6" title="Go to page 7"><span class="visually-hidden"> Page </span>7</a></li>
<li class="pager__item"><a class="large-viewport-pagination" href="?page=7" title="Go to page 8"><span class="visually-hidden"> Page </span>8</a></li>
<li class="pager__item"><a class="large-viewport-pagination" href="?page=8" title="Go to page 9"><span class="visually-hidden"> Page </span>9</a></li>
<li class="pager__item pager__item--next"><a class="large-viewport-pagination" href="?page=4" title="Go to next page" rel="next"><span class="visually-hidden">Next page</span><span aria-hidden="true"><svg width="6" height="20" viewBox="0 0 6 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.292893 5.29289C0.683417 4.90237 1.31658 4.90237 1.70711 5.29289L5.70711 9.29289C6.09763 9.68342 6.09763 10.3166 5.70711 10.7071L1.70711 14.7071C1.31658 15.0976 0.683417 15.0976 0.292893 14.7071C-0.0976311 14.3166 -0.0976311 13.6834 0.292893 13.2929L3.58579 10L0.292893 6.70711C-0.0976311 6.31658 -0.0976311 5.68342 0.292893 5.29289Z" fill="currentColor"></path>
</svg></span></a><a class="btn btn-secondary " data-bs-target="#undefined" href="?page=4" title="Go to next page">Next page<svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 10C0 9.44772 0.447715 9 1 9H15C15.5523 9 16 9.44772 16 10C16 10.5523 15.5523 11 15 11H1C0.447715 11 0 10.5523 0 10Z" fill="currentColor"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.29289 4.29289C9.68342 3.90237 10.3166 3.90237 10.7071 4.29289L15.7071 9.29289C16.0976 9.68342 16.0976 10.3166 15.7071 10.7071L10.7071 15.7071C10.3166 16.0976 9.68342 16.0976 9.29289 15.7071C8.90237 15.3166 8.90237 14.6834 9.29289 14.2929L13.5858 10L9.29289 5.70711C8.90237 5.31658 8.90237 4.68342 9.29289 4.29289Z" fill="currentColor"></path>
</svg></a></li>
<li class="pager__item pager__item--last"><a class="large-viewport-pagination" href="?page=23" title="Go to last page" rel="last"><span class="visually-hidden">Last page</span><span aria-hidden="true"><svg width="12" height="20" viewBox="0 0 12 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.29289 5.29289C6.68342 4.90237 7.31658 4.90237 7.70711 5.29289L11.7071 9.29289C12.0976 9.68342 12.0976 10.3166 11.7071 10.7071L7.70711 14.7071C7.31658 15.0976 6.68342 15.0976 6.29289 14.7071C5.90237 14.3166 5.90237 13.6834 6.29289 13.2929L9.58579 10L6.29289 6.70711C5.90237 6.31658 5.90237 5.68342 6.29289 5.29289Z" fill="currentColor"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.292893 5.29289C0.683417 4.90237 1.31658 4.90237 1.70711 5.29289L5.70711 9.29289C6.09763 9.68342 6.09763 10.3166 5.70711 10.7071L1.70711 14.7071C1.31658 15.0976 0.683417 15.0976 0.292893 14.7071C-0.0976311 14.3166 -0.0976311 13.6834 0.292893 13.2929L3.58579 10L0.292893 6.70711C-0.0976311 6.31658 -0.0976311 5.68342 0.292893 5.29289Z" fill="currentColor"></path>
</svg></span></a></li>
</ul>
</nav>