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