Skip to main content

Chassis v5.5.0

Pagination

Pagination is used to split the contents of pages into sections.

Load more pagination

<nav class="ch-pagination">
  <p class="ch-pagination__title ch-mb--3">
    Showing <strong>75</strong> of <strong>114</strong> results
  </p>
  <div class="ch-progress ch-mb--3">
    <div class="ch-progress__bar" style="width: 66%;"></div>
  </div>
  <button type="button" class="ch-btn ch-width--12 sl:ch-width--auto">Load more</button>
</nav>

Stepped pagination

<nav class="ch-pagination">
  <p class="ch-pagination__title ch-mb--3">
    Showing <strong>141</strong> to <strong>150</strong> of <strong>168</strong> results
  </p>
  <div class="ch-pagination__nav">
    <button type="button" class="ch-btn ch-pagination__previous">
      <span class="ch-reader">previous</span>
    </button>
    <div class="ch-pagination__steps">
      <button type="button" class="ch-btn ch-btn--link ch-pagination__first">
        First
      </button>
      <button type="button" class="ch-btn ch-btn--link ch-pagination__step">
        12
      </button>
      <button type="button" class="ch-btn ch-btn--link ch-pagination__step">
        13
      </button>
      <button type="button" class="ch-btn ch-btn--link ch-pagination__step ch-pagination__step--current" disabled>
        14
      </button>
      <button type="button" class="ch-btn ch-btn--link ch-pagination__step">
        15
      </button>
      <button type="button" class="ch-btn ch-btn--link ch-pagination__step">
        16
      </button>
      <button type="button" class="ch-btn ch-btn--link ch-pagination__last">
        Last
      </button>
    </div>
    <p class="ch-pagination__location">
      Page <strong>14</strong> of <strong>100</strong>
    </p>
    <button type="button" class="ch-btn ch-pagination__next">
      <span class="ch-reader">next</span>
    </button>
  </div>
</nav>
<nav class="ch-pagination">
  <p class="ch-pagination__title ch-mb--3">
    Showing <strong>1</strong> to <strong>10</strong> of <strong>133</strong> results
  </p>
  <div class="ch-pagination__nav">
    <button type="button" class="ch-btn ch-pagination__previous" disabled>
      <span class="ch-reader">previous</span>
    </button>
    <div class="ch-pagination__steps">
      <button type="button" class="ch-btn ch-btn--link ch-pagination__step ch-pagination__step--current" disabled>
        1
      </button>
      <button type="button" class="ch-btn ch-btn--link ch-pagination__step">
        2
      </button>
      <button type="button" class="ch-btn ch-btn--link ch-pagination__step">
        3
      </button>
      <button type="button" class="ch-btn ch-btn--link ch-pagination__step">
        4
      </button>
      <button type="button" class="ch-btn ch-btn--link ch-pagination__step">
        5
      </button>
      <button type="button" class="ch-btn ch-btn--link ch-pagination__last">
        Last
      </button>
    </div>
    <p class="ch-pagination__location">
      Page <strong>1</strong> of <strong>100</strong>
    </p>
    <button type="button" class="ch-btn ch-pagination__next">
      <span class="ch-reader">next</span>
    </button>
  </div>
</nav>
<nav class="ch-pagination">
  <p class="ch-pagination__title ch-mb--3">
    Showing <strong>991</strong> to <strong>1000</strong> of <strong>1000</strong> results
  </p>
  <div class="ch-pagination__nav">
    <button type="button" class="ch-btn ch-pagination__previous">
      <span class="ch-reader">previous</span>
    </button>
    <div class="ch-pagination__steps">
      <button type="button" class="ch-btn ch-btn--link ch-pagination__first">
        First
      </button>
      <button type="button" class="ch-btn ch-btn--link ch-pagination__step">
        96
      </button>
      <button type="button" class="ch-btn ch-btn--link ch-pagination__step">
        97
      </button>
      <button type="button" class="ch-btn ch-btn--link ch-pagination__step">
        98
      </button>
      <button type="button" class="ch-btn ch-btn--link ch-pagination__step">
        99
      </button>
      <button type="button" class="ch-btn ch-btn--link ch-pagination__step ch-pagination__step--current" disabled>
        100
      </button>
    </div>
    <p class="ch-pagination__location">
      Page <strong>100</strong> of <strong>100</strong>
    </p>
    <button type="button" class="ch-btn ch-pagination__next" disabled>
      <span class="ch-reader">next</span>
    </button>
  </div>
</nav>