UI Molecules

<nav class="amui-m-pagination" aria-label="Page navigation">
  <ul class="amui-m-pagination__list pagination">
    <li class="amui-m-pagination__list-item is--disabled">
      <a href="#" aria-label="Précédent">
        <span aria-hidden="true">Précédent</span>
      </a>
    </li>
    <li class="amui-m-pagination__list-item is--active"><a href="#">1 <span class="sr-only">(active)</span></a></li>
    <li class="amui-m-pagination__list-item"><a href="#">2</a></li>
    <li class="amui-m-pagination__list-item"><a href="#">3</a></li>
    <li class="amui-m-pagination__list-item"><a href="#">4</a></li>
    <li class="amui-m-pagination__list-item"><a href="#">5</a></li>
    <li class="amui-m-pagination__list-item">
      <a href="#" aria-label="Next">
        <span aria-hidden="true">Suivant</span>
      </a>
    </li>
  </ul>
</nav>

<nav class="amui-m-pagination" aria-label="Page navigation">
  <ul class="amui-m-pagination__list pagination pagination-sm">
    <li class="amui-m-pagination__list-item is--disabled">
      <a href="#" aria-label="Précédent">
        <span aria-hidden="true">Précédent</span>
      </a>
    </li>
    <li class="amui-m-pagination__list-item is--active"><a href="#">1 <span class="sr-only">(active)</span></a></li>
    <li class="amui-m-pagination__list-item"><a href="#">2</a></li>
    <li class="amui-m-pagination__list-item"><a href="#">3</a></li>
    <li class="amui-m-pagination__list-item"><a href="#">4</a></li>
    <li class="amui-m-pagination__list-item"><a href="#">5</a></li>
    <li class="amui-m-pagination__list-item">
      <a href="#" aria-label="Next">
        <span aria-hidden="true">Suivant</span>
      </a>
    </li>
  </ul>
</nav>

<nav class="amui-m-pagination" aria-label="Page navigation">
  <ul class="amui-m-pagination__list pagination">
    <li class="amui-m-pagination__list-item is--disabled">
      <a href="#" aria-label="Précédent">
        <span aria-hidden="true">Précédent</span>
      </a>
    </li>
    <li class="amui-m-pagination__list-item is--active"><a href="#">1 <span class="sr-only">(active)</span></a></li>
    <li class="amui-m-pagination__list-item"><a href="#">2</a></li>
    <li class="amui-m-pagination__list-item"><a href="#">3</a></li>
    <li class="amui-m-pagination__list-item"><a href="#">4</a></li>
    <li class="amui-m-pagination__list-item"><a href="#">5</a></li>
    <li class="amui-m-pagination__list-item">
      <a href="#" aria-label="Next">
        <span aria-hidden="true">Suivant</span>
      </a>
    </li>
  </ul>
</nav>

<nav class="amui-m-pagination" aria-label="Page navigation">
  <ul class="amui-m-pagination__list pagination pagination-lg">
    <li class="amui-m-pagination__list-item is--disabled">
      <a href="#" aria-label="Précédent">
        <span aria-hidden="true">Précédent</span>
      </a>
    </li>
    <li class="amui-m-pagination__list-item is--active"><a href="#">1 <span class="sr-only">(active)</span></a></li>
    <li class="amui-m-pagination__list-item"><a href="#">2</a></li>
    <li class="amui-m-pagination__list-item"><a href="#">3</a></li>
    <li class="amui-m-pagination__list-item"><a href="#">4</a></li>
    <li class="amui-m-pagination__list-item"><a href="#">5</a></li>
    <li class="amui-m-pagination__list-item">
      <a href="#" aria-label="Next">
        <span aria-hidden="true">Suivant</span>
      </a>
    </li>
  </ul>
</nav>