<nav class="ecl-pagination" aria-label="Pagination">
<ul class="ecl-pagination__list">
<li class="ecl-pagination__item ecl-pagination__item--previous"><a aria-label="Go to previous page" href="/example"
class="ecl-pagination__link ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-before"><svg
focusable="false" aria-hidden="true" class="ecl-link__icon ecl-icon ecl-icon--xs ecl-icon--rotate-270">
<use xlink:href="/dist/media/icons.db866e2e.svg#ui--corner-arrow"></use>
</svg> <span class="ecl-link__label">Previous</span></a></li>
<li class="ecl-pagination__item"><a aria-label="Go to page 24" href="/example"
class="ecl-pagination__link ecl-link ecl-link--standalone">24</a></li>
<li class="ecl-pagination__item"><a aria-label="Go to page 25" href="/example"
class="ecl-pagination__link ecl-link ecl-link--standalone">25</a></li>
<li class="ecl-pagination__item ecl-pagination__item--current"><span
class="ecl-pagination__text ecl-pagination__text--summary" aria-label="Page 26"
aria-current="true">26</span><span class="ecl-pagination__text ecl-pagination__text--full"
aria-current="true">Page 26</span></li>
<li class="ecl-pagination__item"><a aria-label="Go to page 27" href="/example"
class="ecl-pagination__link ecl-link ecl-link--standalone">27</a></li>
<li class="ecl-pagination__item"><a aria-label="Go to page 28" href="/example"
class="ecl-pagination__link ecl-link ecl-link--standalone">28</a></li>
<li class="ecl-pagination__item ecl-pagination__item--next"><a aria-label="Go to next page" href="/example"
class="ecl-pagination__link ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after"><span
class="ecl-link__label">Next</span> <svg focusable="false" aria-hidden="true"
class="ecl-link__icon ecl-icon ecl-icon--xs ecl-icon--rotate-90">
<use xlink:href="/dist/media/icons.db866e2e.svg#ui--corner-arrow"></use>
</svg></a></li>
</ul>
</nav>Try it yourself on the playground
Playground