You are here

pagination.twig in Open Social 8.5

<nav role="navigation" aria-labelledby="pagination-heading" class="pager-nav text-center">
  <h4 id="pagination-heading" class="visually-hidden">Pagination</h4>
  <ul class="pagination">
    <li class="disabled pager__item--previous">
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">
         <svg class="icon-small icon-gray">
           <use xlink:href="#icon-navigate_before"></use>
         </svg>
        </span>
      </a>
    </li>
    <li class="active">
      <a href="#">1
        <span class="sr-only"> (current) </span>
      </a>
    </li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li class="pager__item--next">
      <a href="#" aria-label="Next">
        <span aria-hidden="true">
          <svg class="icon-small icon-gray">
           <use xlink:href="#icon-navigate_next"></use>
         </svg>
        </span>
      </a>
    </li>
  </ul>
</nav>

File

themes/socialbase/components/03-molecules/navigation/pagination/pagination.twig
View source
  1. <nav role="navigation" aria-labelledby="pagination-heading" class="pager-nav text-center">
  2. <h4 id="pagination-heading" class="visually-hidden">Pagination</h4>
  3. <ul class="pagination">
  4. <li class="disabled pager__item--previous">
  5. <a href="#" aria-label="Previous">
  6. <span aria-hidden="true">
  7. <svg class="icon-small icon-gray">
  8. <use xlink:href="#icon-navigate_before"></use>
  9. </svg>
  10. </span>
  11. </a>
  12. </li>
  13. <li class="active">
  14. <a href="#">1
  15. <span class="sr-only"> (current) </span>
  16. </a>
  17. </li>
  18. <li><a href="#">2</a></li>
  19. <li><a href="#">3</a></li>
  20. <li><a href="#">4</a></li>
  21. <li><a href="#">5</a></li>
  22. <li class="pager__item--next">
  23. <a href="#" aria-label="Next">
  24. <span aria-hidden="true">
  25. <svg class="icon-small icon-gray">
  26. <use xlink:href="#icon-navigate_next"></use>
  27. </svg>
  28. </span>
  29. </a>
  30. </li>
  31. </ul>
  32. </nav>