BX Swiss Component Library

Pagination

The pagination component is used to navigate between multiple pages of content.

Pagination should only be used when it’s not possible to show all information on a single page.

<ol class="pagination">
    <li class="pagination__item">
        <a href="#" class="pagination__link">
            <span class="visually-hidden">Go to previous page</span>
            <svg viewBox="0 0 24 24" class="icon icon--s ">
		<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#back-arrow"></use>
	</svg>
        </a>
    </li>
    <li class="pagination__item">
        <a href="#" class="pagination__link">1</a>
    </li>
    <li class="pagination__item">
        <a href="#" class="pagination__link">2</a>
    </li>
    <li class="pagination__item is-active">
        <a href="#" class="pagination__link">3</a>
    </li>
    <li class="pagination__item">
        <a href="#" class="pagination__link">4</a>
    </li>
    <li class="pagination__item">
        <a href="#" class="pagination__link">5</a>
    </li>
    <li class="pagination__item">
        <a href="#" class="pagination__link">6</a>
    </li>
    <li class="pagination__item">
        <a href="#" class="pagination__link">7</a>
    </li>
    <li class="pagination__item">
        <a href="#" class="pagination__link">8</a>
    </li>
    <li class="pagination__item">
        <a href="#" class="pagination__link">...</a>
    </li>
    <li class="pagination__item">
        <a href="#" class="pagination__link">23</a>
    </li>
    <li class="pagination__item">
        <a href="#" class="pagination__link">
            <span class="visually-hidden">Go to next page</span>
            <svg viewBox="0 0 24 24" class="icon icon--s ">
		<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#forward-arrow"></use>
	</svg>
        </a>
    </li>
</ol>
 
<ol class="pagination">
    <li class="pagination__item">
        <a href="#" class="pagination__link">
            <span class="visually-hidden">Go to previous page</span>
            {{{icon "back-arrow"}}}
        </a>
    </li>
    <li class="pagination__item">
      <a href="#" class="pagination__link">1</a>
    </li>
    <li class="pagination__item">
      <a href="#" class="pagination__link">2</a>
    </li>
    <li class="pagination__item is-active">
      <a href="#" class="pagination__link">3</a>
    </li>
    <li class="pagination__item">
      <a href="#" class="pagination__link">4</a>
    </li>
    <li class="pagination__item">
      <a href="#" class="pagination__link">5</a>
    </li>
    <li class="pagination__item">
      <a href="#" class="pagination__link">6</a>
    </li>
    <li class="pagination__item">
      <a href="#" class="pagination__link">7</a>
    </li>
    <li class="pagination__item">
      <a href="#" class="pagination__link">8</a>
    </li>
    <li class="pagination__item">
      <a href="#" class="pagination__link">...</a>
    </li>
    <li class="pagination__item">
      <a href="#" class="pagination__link">23</a>
    </li>
    <li class="pagination__item">
        <a href="#" class="pagination__link">
            <span class="visually-hidden">Go to next page</span>
            {{{icon "forward-arrow"}}}
        </a>
    </li>
</ol>
 
/* No context defined for this component. */