Pagination

Design System Navigation

Pagination Complete

  • 
    
      <nav class="pagination u-center-block u-text-align--center" role="navigation">
                  <a href="?page=6" class="pagination__page pagination__prev u-padding--quarter u-theme--color--darker u-font-weight--bold">
            <span class="u-icon u-icon--m u-theme--path-fill--dark u-space--half--left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><title>o-arrow__bracket--right</title><path d="M3.25,6.41l3.5,3.5L8.16,8.5,4.66,5l3.5-3.5L6.75.09l-3.5,3.5L1.84,5Z" fill="#9b9b9b"/></svg>
    </span>
          </a>
                  <a href="?page=1" class="pagination__page u-padding--quarter u-theme--color--darker u-font-weight--bold">1</a>
        
                  <span class="pagination__divide">&hellip;</span>
        
                      <a href="?page=4" rel="noindex, follow" class="pagination__page u-padding--quarter u-theme--color--darker u-font-weight--bold">4</a>
                            <a href="?page=5" rel="noindex, follow" class="pagination__page u-padding--quarter u-theme--color--darker u-font-weight--bold">5</a>
                            <a href="?page=6" rel="noindex, follow" class="pagination__page u-padding--quarter u-theme--color--darker u-font-weight--bold">6</a>
                            <span class="pagination__page pagination__page--current u-padding--quarter u-theme--color--base u-font-weight--bold">7</span>
                            <a href="?page=8" rel="noindex, follow" class="pagination__page u-padding--quarter u-theme--color--darker u-font-weight--bold">8</a>
                            <a href="?page=9" rel="noindex, follow" class="pagination__page u-padding--quarter u-theme--color--darker u-font-weight--bold">9</a>
                            <a href="?page=10" rel="noindex, follow" class="pagination__page u-padding--quarter u-theme--color--darker u-font-weight--bold">10</a>
              
                  <span class="pagination__divide">&hellip;</span>
        
                  <a href="?page=120" rel="noindex, follow" class="pagination__page u-padding--quarter u-theme--color--darker u-font-weight--bold">
            120
          </a>
                  <a href="?page=8" class="pagination__page pagination__prev u-padding--quarteru-theme--color--darker u-font-weight--bold">
            <span class="u-icon u-icon--m u-theme--path-fill--dark u-space--half--right"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><title>Artboard 1</title><path d="M6.75,3.59,3.25.09,1.84,1.5,5.34,5,1.84,8.5,3.25,9.91l3.5-3.5L8.16,5Z" fill="#9b9b9b"/></svg>
    </span>
          </a>
          </nav>
    
    
    {% if pager.totalpages > 1 %}
      <nav class="pagination u-center-block u-text-align--center" role="navigation">
        {# 'first' and 'prev' #}
        {% if pager.current > 1 %}
          <a href="{{ pager.link }}{{ pager.current - 1 }}" class="pagination__page pagination__prev u-padding--quarter u-theme--color--darker u-font-weight--bold">
            <span class="u-icon u-icon--m u-theme--path-fill--dark u-space--half--left">{% include '@atoms/icons/icon-arrow-bracket-left.twig' %}</span>
          </a>
        {% endif %}
        {% if pager.current > (pager.surrounding + 1) %}
          <a href="{{ pager.link }}{{ 1 }}" class="pagination__page u-padding--quarter u-theme--color--darker u-font-weight--bold">1</a>
        {% endif %}
    
        {# start with ellipsis if there are more than pager.surrounding+1 before currentpage.. #}
        {% if pager.current > (pager.surrounding + 2) %}
          <span class="pagination__divide">{{ pager.ellipsis|raw }}</span>
        {% endif %}
    
        {% for i in max(1, pager.current - pager.surrounding)..min(pager.current + pager.surrounding, pager.totalpages) %}
          {% if i == pager.current %}
            <span class="pagination__page pagination__page--current u-padding--quarter u-theme--color--base u-font-weight--bold">{{ i }}</span>
          {% else %}
            <a href="{{ pager.link }}{{ i }}" rel="noindex, follow" class="pagination__page u-padding--quarter u-theme--color--darker u-font-weight--bold">{{ i }}</a>
          {% endif %}
        {% endfor %}
    
        {# end with ellipsis if there are more than pager.surrounding+1 after currentpage.. #}
        {% if pager.current < (pager.totalpages - pager.surrounding - 1) %}
          <span class="pagination__divide">{{ pager.ellipsis|raw }}</span>
        {% endif %}
    
        {# 'next' and 'last' #}
        {% if pager.current < (pager.totalpages - pager.surrounding) %}
          <a href="{{ pager.link }}{{ pager.totalpages }}" rel="noindex, follow" class="pagination__page u-padding--quarter u-theme--color--darker u-font-weight--bold">
            {{ pager.totalpages }}
          </a>
        {% endif %}
        {% if pager.current < pager.totalpages %}
          <a href="{{ pager.link }}{{ pager.current + 1 }}" class="pagination__page pagination__prev u-padding--quarteru-theme--color--darker u-font-weight--bold">
            <span class="u-icon u-icon--m u-theme--path-fill--dark u-space--half--right">{% include '@atoms/icons/icon-arrow-bracket-right.twig' %}</span>
          </a>
        {% endif %}
      </nav>
    {% endif %}