Pagination

figma:ready

scss:ready

freemarker:ready

vue:ready

Accessibility

In order to guarantee the component accessibility, please make sure to respect the following rules when integrating the component into your pages:

Always use a role="navigation" attribute on the .mc-pagination element.

Always use an aria-label="pagination" attribute on the .mc-pagination element.


<nav class="mc-pagination" role="navigation" aria-label="pagination">
  <!-- following code here -->
</div>

Use aria-label="the button purpose" on every button.mc-pagination__button element of the pagination


<a href="#" class="mc-pagination__button" aria-label="Previous page">
  <svg class="mc-pagination__button-icon">
    <use xlink:href="#iconLeftL" />
  </svg>
</a>
<!-- following code here -->
<a href="#" class="mc-pagination__button" aria-label="Next Page">
  <svg class="mc-pagination__button-icon">
    <use xlink:href="#iconRightL" />
  </svg>
</a>