Pagination

‹ Back

Ornament comes with a custom Kaminari pagination template by default and comes with a few different out-of-the-box styles.

"pages" style can be used by changing the pagination modifier to pagination__pages:

<nav class="pagination pagination__pages" role="navigation">
    <div class="pagination--table">
    <span class="pagination--first disabled">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="-3.5 0 18 16" style="width: 18px; height: 16px; " class="icon-chevron_left_double">
  <path fill="#000000" class="icon--fill" d="M7.744,7.999l6.641-5.691c0.139-0.12,0.156-0.33,0.037-0.47l-1.477-1.721
    c-0.119-0.141-0.33-0.156-0.471-0.036L3.529,7.747C3.456,7.81,3.414,7.903,3.414,8s0.042,0.19,0.116,0.253l8.945,7.668
    C12.537,15.975,12.611,16,12.691,16c0.01,0,0.02,0,0.025,0c0.088-0.006,0.17-0.048,0.229-0.115l1.477-1.722
    c0.119-0.142,0.102-0.351-0.037-0.472L7.744,7.999z"/>
  <path fill="#000000" class="icon--fill" d="M0.832,7.999l6.639-5.691c0.141-0.12,0.156-0.33,0.037-0.47L6.033,0.117
    C5.912-0.024,5.701-0.039,5.562,0.081l-8.946,7.666C-3.458,7.81-3.5,7.903-3.5,8s0.042,0.19,0.116,0.253l8.946,7.668
    C5.623,15.975,5.699,16,5.779,16c0.008,0,0.018,0,0.023,0c0.09-0.006,0.17-0.048,0.23-0.115l1.475-1.722
    c0.119-0.142,0.104-0.351-0.037-0.472L0.832,7.999z"/>
</svg>    </span>
    <span class="pagination--prev disabled">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 16" style="width: 12px; height: 16px; " class="icon-chevron_left">
  <path class="icon--fill" fill="#000000" d="M11.883,7.748 L2.938,0.081 C2.871,0.023 2.787,-0.005 2.695,0.001 C2.607,0.009 2.525,0.05 2.468,0.117 L0.993,1.838 C0.873,1.977 0.889,2.188 1.029,2.307 L7.67,8.001 L1.029,13.692 C0.889,13.811 0.873,14.022 0.993,14.163 L2.468,15.885 C2.534,15.962 2.628,16.001 2.721,16.001 C2.798,16.001 2.875,15.976 2.938,15.921 L11.883,8.255 C11.957,8.192 12,8.099 12,8.001 C12,7.903 11.957,7.812 11.883,7.748" transform="rotate(180 6.456 8)"/>
</svg>    </span>
    <span class="pagination--page current">
      1
    </span>
    <span class="pagination--page">
      <a href="#" rel="next" title="Go to page 2">2</a>
    </span>
    <span class="pagination--page">
      <a href="#" rel="next" title="Go to page 3">3</a>
    </span>
    <span class="pagination--gap">
      ...
    </span>
    <span class="pagination--page">
      <a href="#" rel="next" title="Go to page 6">6</a>
    </span>
    <div class="pagination--count">
      Page 1 of 6
    </div>
    <span class="pagination--next">
      <a href="#" rel="next" title="Go to next page">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 16" style="width: 12px; height: 16px; " class="icon-chevron_right">
  <path class="icon--fill" fill="#000000" d="M11.883,7.748 L2.938,0.081 C2.871,0.023 2.787,-0.005 2.695,0.001 C2.607,0.009 2.525,0.05 2.468,0.117 L0.993,1.838 C0.873,1.977 0.889,2.188 1.029,2.307 L7.67,8.001 L1.029,13.692 C0.889,13.811 0.873,14.022 0.993,14.163 L2.468,15.885 C2.534,15.962 2.628,16.001 2.721,16.001 C2.798,16.001 2.875,15.976 2.938,15.921 L11.883,8.255 C11.957,8.192 12,8.099 12,8.001 C12,7.903 11.957,7.812 11.883,7.748" transform="translate(-1)"/>
</svg>      </a>
    </span>
    <span class="pagination--last">
      <a href="#" title="Go to last page">
        <svg viewBox="-3 0 18 16" style="width: 18px; height: 16px; " class="icon-chevron_right_double">
  <path fill="#000000" class="icon--fill" d="M7.971,7.748l-8.945-7.667c-0.067-0.058-0.151-0.086-0.243-0.08c-0.088,0.008-0.17,0.049-0.227,0.116
    l-1.475,1.721c-0.12,0.139-0.104,0.35,0.036,0.469l6.641,5.694l-6.641,5.69c-0.14,0.119-0.156,0.33-0.036,0.472l1.475,1.722
    c0.066,0.077,0.16,0.116,0.253,0.116c0.077,0,0.154-0.024,0.217-0.08l8.945-7.666c0.074-0.063,0.117-0.156,0.117-0.254
    S8.045,7.812,7.971,7.748"/>
  <path fill="#000000" class="icon--fill" d="M14.883,7.748L5.938,0.081c-0.066-0.058-0.15-0.086-0.243-0.08C5.606,0.009,5.524,0.05,5.467,0.117
    L3.993,1.838c-0.12,0.139-0.104,0.35,0.036,0.469l6.642,5.694l-6.642,5.69c-0.14,0.119-0.156,0.33-0.036,0.472l1.475,1.722
    c0.066,0.077,0.16,0.116,0.253,0.116c0.076,0,0.154-0.024,0.217-0.08l8.945-7.666C14.957,8.192,15,8.099,15,8.001
    S14.957,7.812,14.883,7.748"/>
</svg>
      </a>
    </span>
  </div>
</nav>

"count" style can be used by changing the pagination modifier to pagination__count:

<nav class="pagination pagination__count" role="navigation">
    <div class="pagination--table">
    <span class="pagination--first disabled">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="-3.5 0 18 16" style="width: 18px; height: 16px; " class="icon-chevron_left_double">
  <path fill="#000000" class="icon--fill" d="M7.744,7.999l6.641-5.691c0.139-0.12,0.156-0.33,0.037-0.47l-1.477-1.721
    c-0.119-0.141-0.33-0.156-0.471-0.036L3.529,7.747C3.456,7.81,3.414,7.903,3.414,8s0.042,0.19,0.116,0.253l8.945,7.668
    C12.537,15.975,12.611,16,12.691,16c0.01,0,0.02,0,0.025,0c0.088-0.006,0.17-0.048,0.229-0.115l1.477-1.722
    c0.119-0.142,0.102-0.351-0.037-0.472L7.744,7.999z"/>
  <path fill="#000000" class="icon--fill" d="M0.832,7.999l6.639-5.691c0.141-0.12,0.156-0.33,0.037-0.47L6.033,0.117
    C5.912-0.024,5.701-0.039,5.562,0.081l-8.946,7.666C-3.458,7.81-3.5,7.903-3.5,8s0.042,0.19,0.116,0.253l8.946,7.668
    C5.623,15.975,5.699,16,5.779,16c0.008,0,0.018,0,0.023,0c0.09-0.006,0.17-0.048,0.23-0.115l1.475-1.722
    c0.119-0.142,0.104-0.351-0.037-0.472L0.832,7.999z"/>
</svg>    </span>
    <span class="pagination--prev disabled">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 16" style="width: 12px; height: 16px; " class="icon-chevron_left">
  <path class="icon--fill" fill="#000000" d="M11.883,7.748 L2.938,0.081 C2.871,0.023 2.787,-0.005 2.695,0.001 C2.607,0.009 2.525,0.05 2.468,0.117 L0.993,1.838 C0.873,1.977 0.889,2.188 1.029,2.307 L7.67,8.001 L1.029,13.692 C0.889,13.811 0.873,14.022 0.993,14.163 L2.468,15.885 C2.534,15.962 2.628,16.001 2.721,16.001 C2.798,16.001 2.875,15.976 2.938,15.921 L11.883,8.255 C11.957,8.192 12,8.099 12,8.001 C12,7.903 11.957,7.812 11.883,7.748" transform="rotate(180 6.456 8)"/>
</svg>    </span>
    <span class="pagination--page current">
      1
    </span>
    <span class="pagination--page">
      <a href="#" rel="next" title="Go to page 2">2</a>
    </span>
    <span class="pagination--page">
      <a href="#" rel="next" title="Go to page 3">3</a>
    </span>
    <span class="pagination--gap">
      ...
    </span>
    <span class="pagination--page">
      <a href="#" rel="next" title="Go to page 6">6</a>
    </span>
    <div class="pagination--count">
      Page 1 of 6
    </div>
    <span class="pagination--next">
      <a href="#" rel="next" title="Go to next page">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 16" style="width: 12px; height: 16px; " class="icon-chevron_right">
  <path class="icon--fill" fill="#000000" d="M11.883,7.748 L2.938,0.081 C2.871,0.023 2.787,-0.005 2.695,0.001 C2.607,0.009 2.525,0.05 2.468,0.117 L0.993,1.838 C0.873,1.977 0.889,2.188 1.029,2.307 L7.67,8.001 L1.029,13.692 C0.889,13.811 0.873,14.022 0.993,14.163 L2.468,15.885 C2.534,15.962 2.628,16.001 2.721,16.001 C2.798,16.001 2.875,15.976 2.938,15.921 L11.883,8.255 C11.957,8.192 12,8.099 12,8.001 C12,7.903 11.957,7.812 11.883,7.748" transform="translate(-1)"/>
</svg>      </a>
    </span>
    <span class="pagination--last">
      <a href="#" title="Go to last page">
        <svg viewBox="-3 0 18 16" style="width: 18px; height: 16px; " class="icon-chevron_right_double">
  <path fill="#000000" class="icon--fill" d="M7.971,7.748l-8.945-7.667c-0.067-0.058-0.151-0.086-0.243-0.08c-0.088,0.008-0.17,0.049-0.227,0.116
    l-1.475,1.721c-0.12,0.139-0.104,0.35,0.036,0.469l6.641,5.694l-6.641,5.69c-0.14,0.119-0.156,0.33-0.036,0.472l1.475,1.722
    c0.066,0.077,0.16,0.116,0.253,0.116c0.077,0,0.154-0.024,0.217-0.08l8.945-7.666c0.074-0.063,0.117-0.156,0.117-0.254
    S8.045,7.812,7.971,7.748"/>
  <path fill="#000000" class="icon--fill" d="M14.883,7.748L5.938,0.081c-0.066-0.058-0.15-0.086-0.243-0.08C5.606,0.009,5.524,0.05,5.467,0.117
    L3.993,1.838c-0.12,0.139-0.104,0.35,0.036,0.469l6.642,5.694l-6.642,5.69c-0.14,0.119-0.156,0.33-0.036,0.472l1.475,1.722
    c0.066,0.077,0.16,0.116,0.253,0.116c0.076,0,0.154-0.024,0.217-0.08l8.945-7.666C14.957,8.192,15,8.099,15,8.001
    S14.957,7.812,14.883,7.748"/>
</svg>
      </a>
    </span>
  </div>
</nav>

You can use a hybrid of both pages and count that starts as pages on desktop and then goes to count on mobile by using the pagination__hybrid class.

<nav class="pagination pagination__hybrid" role="navigation">
    <div class="pagination--table">
    <span class="pagination--first disabled">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="-3.5 0 18 16" style="width: 18px; height: 16px; " class="icon-chevron_left_double">
  <path fill="#000000" class="icon--fill" d="M7.744,7.999l6.641-5.691c0.139-0.12,0.156-0.33,0.037-0.47l-1.477-1.721
    c-0.119-0.141-0.33-0.156-0.471-0.036L3.529,7.747C3.456,7.81,3.414,7.903,3.414,8s0.042,0.19,0.116,0.253l8.945,7.668
    C12.537,15.975,12.611,16,12.691,16c0.01,0,0.02,0,0.025,0c0.088-0.006,0.17-0.048,0.229-0.115l1.477-1.722
    c0.119-0.142,0.102-0.351-0.037-0.472L7.744,7.999z"/>
  <path fill="#000000" class="icon--fill" d="M0.832,7.999l6.639-5.691c0.141-0.12,0.156-0.33,0.037-0.47L6.033,0.117
    C5.912-0.024,5.701-0.039,5.562,0.081l-8.946,7.666C-3.458,7.81-3.5,7.903-3.5,8s0.042,0.19,0.116,0.253l8.946,7.668
    C5.623,15.975,5.699,16,5.779,16c0.008,0,0.018,0,0.023,0c0.09-0.006,0.17-0.048,0.23-0.115l1.475-1.722
    c0.119-0.142,0.104-0.351-0.037-0.472L0.832,7.999z"/>
</svg>    </span>
    <span class="pagination--prev disabled">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 16" style="width: 12px; height: 16px; " class="icon-chevron_left">
  <path class="icon--fill" fill="#000000" d="M11.883,7.748 L2.938,0.081 C2.871,0.023 2.787,-0.005 2.695,0.001 C2.607,0.009 2.525,0.05 2.468,0.117 L0.993,1.838 C0.873,1.977 0.889,2.188 1.029,2.307 L7.67,8.001 L1.029,13.692 C0.889,13.811 0.873,14.022 0.993,14.163 L2.468,15.885 C2.534,15.962 2.628,16.001 2.721,16.001 C2.798,16.001 2.875,15.976 2.938,15.921 L11.883,8.255 C11.957,8.192 12,8.099 12,8.001 C12,7.903 11.957,7.812 11.883,7.748" transform="rotate(180 6.456 8)"/>
</svg>    </span>
    <span class="pagination--page current">
      1
    </span>
    <span class="pagination--page">
      <a href="#" rel="next" title="Go to page 2">2</a>
    </span>
    <span class="pagination--page">
      <a href="#" rel="next" title="Go to page 3">3</a>
    </span>
    <span class="pagination--gap">
      ...
    </span>
    <span class="pagination--page">
      <a href="#" rel="next" title="Go to page 6">6</a>
    </span>
    <div class="pagination--count">
      Page 1 of 6
    </div>
    <span class="pagination--next">
      <a href="#" rel="next" title="Go to next page">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 16" style="width: 12px; height: 16px; " class="icon-chevron_right">
  <path class="icon--fill" fill="#000000" d="M11.883,7.748 L2.938,0.081 C2.871,0.023 2.787,-0.005 2.695,0.001 C2.607,0.009 2.525,0.05 2.468,0.117 L0.993,1.838 C0.873,1.977 0.889,2.188 1.029,2.307 L7.67,8.001 L1.029,13.692 C0.889,13.811 0.873,14.022 0.993,14.163 L2.468,15.885 C2.534,15.962 2.628,16.001 2.721,16.001 C2.798,16.001 2.875,15.976 2.938,15.921 L11.883,8.255 C11.957,8.192 12,8.099 12,8.001 C12,7.903 11.957,7.812 11.883,7.748" transform="translate(-1)"/>
</svg>      </a>
    </span>
    <span class="pagination--last">
      <a href="#" title="Go to last page">
        <svg viewBox="-3 0 18 16" style="width: 18px; height: 16px; " class="icon-chevron_right_double">
  <path fill="#000000" class="icon--fill" d="M7.971,7.748l-8.945-7.667c-0.067-0.058-0.151-0.086-0.243-0.08c-0.088,0.008-0.17,0.049-0.227,0.116
    l-1.475,1.721c-0.12,0.139-0.104,0.35,0.036,0.469l6.641,5.694l-6.641,5.69c-0.14,0.119-0.156,0.33-0.036,0.472l1.475,1.722
    c0.066,0.077,0.16,0.116,0.253,0.116c0.077,0,0.154-0.024,0.217-0.08l8.945-7.666c0.074-0.063,0.117-0.156,0.117-0.254
    S8.045,7.812,7.971,7.748"/>
  <path fill="#000000" class="icon--fill" d="M14.883,7.748L5.938,0.081c-0.066-0.058-0.15-0.086-0.243-0.08C5.606,0.009,5.524,0.05,5.467,0.117
    L3.993,1.838c-0.12,0.139-0.104,0.35,0.036,0.469l6.642,5.694l-6.642,5.69c-0.14,0.119-0.156,0.33-0.036,0.472l1.475,1.722
    c0.066,0.077,0.16,0.116,0.253,0.116c0.076,0,0.154-0.024,0.217-0.08l8.945-7.666C14.957,8.192,15,8.099,15,8.001
    S14.957,7.812,14.883,7.748"/>
</svg>
      </a>
    </span>
  </div>
</nav>