PCCW Global

  1. Home
  2. Pagination

Pagination

The pagination component is used to provide pagination links for long lists that are split into multiple pages.

Pagination component

The pagination component includes a button group that contains the page numbers and a pair of buttons that navigate to the next or previous page. The pagination component responds to small resolution tiers by changing its layout for easier navigation on mobile devices.

Code output
HTML Markup
Copy<div class="pagination">
  <div class="btn-group">
    <a href=# class="btn btn-sec btn-prev"><i class="sky-icon-prev"></i></a>
    <a href=# class="btn btn-sec">1</a>
    <a href=# class="btn btn-sec active">2</a>
    <a href=# class="btn btn-sec">3</a>
    <span class="inline-text-block">&hellip;</span>
    <a href=# class="btn btn-sec">10</a>
    <a href=# class="btn btn-sec btn-next"><i class="sky-icon-next"></i></a>
  </div>
</div>

Pagination button styling

Pagination button sizing properties, defined in the buttons section of this framework can be adjusted in the pagination component. The span elements that contain the ellipsis character (…) also need the appropriate size class.

Code output
HTML Markup
Copy<div class="pagination">
  <div class="btn-group">
    <a href=# class="btn btn-sm btn-sec btn-prev"><i class="sky-icon-prev"></i></a>
    <a href=# class="btn btn-sm btn-sec">1</a>
    <a href=# class="btn btn-sm btn-sec active">2</a>
    <a href=# class="btn btn-sm btn-sec">3</a>
    <span class="inline-text-block-sm">&hellip;</span>
    <a href=# class="btn btn-sm btn-sec">10</a>
    <a href=# class="btn btn-sm btn-sec btn-next"><i class="sky-icon-next"></i></a>
  </div>
</div>

Responsive pagination component

The responsive pagination component looks identical to the normal pagination component at all resolution tiers except the extra small ones xxs, xs where a select element replaces the individual page navigation buttons. Some additional markup is required for the mobile navigation.

Code output
HTML Markup
Copy<div class="pagination">
  <div class="mobile-pagination">
    <div class="mobile-pagination-label">
      Page <strong>1</strong> of <strong>10</strong>
      <select onchange="location=this.value;">
        <option value="1">Page 1</option>
        <option value="2">Page 2</option>
        <option value="3">Page 3</option>
        <option value="4">Page 4</option>
        <option value="5">Page 5</option>
        <option value="6">Page 6</option>
        <option value="7">Page 7</option>
        <option value="8">Page 8</option>
        <option value="9">Page 9</option>
        <option value="10">Page 10</option>
      </select>
    </div>
  </div>
  <div class="btn-group">
    <a href=# class="btn btn-sec btn-prev"><i class="sky-icon-prev"></i></a>
    <a href=# class="btn btn-sec">1</a>
    <span class="inline-text-block">&hellip;</span>
    <a href=# class="btn btn-sec">4</a>
    <a href=# class="btn btn-sec active">5</a>
    <a href=# class="btn btn-sec">6</a>
    <span class="inline-text-block">&hellip;</span>
    <a href=# class="btn btn-sec">10</a>
    <a href=# class="btn btn-sec btn-next"><i class="sky-icon-next"></i></a>
  </div>
</div>

Compact pagination component

The compact pagination component allows easier navigation between large datasets while keeping a small interface footprint, making it ideal for dashboard interfaces.

Code output
Page 1 of 10
HTML Markup
Copy<div class="pagination-compact">
  <span class="inline-text-block">Page <strong>1</strong> of <strong>10</strong></span>
  <input type="search" placeholder="Jump to">
  <div class="btn-group">
    <a href=# class="btn btn-sec btn-prev"><i class="sky-icon-prev"></i></a>
    <a href=# class="btn btn-sec btn-next"><i class="sky-icon-next"></i></a>
  </div>
</div>

Compact pagination styling

The compact navigation component can be styled by applying the appropriate classes to its contained elements, as shown in the example below.

Code output
Page 1 of 10
HTML Markup
Copy<div class="pagination-compact">
  <span class="inline-text-block-sm">Page <strong>1</strong> of <strong>10</strong></span>
  <input class="form-control-sm" type="search" placeholder="Jump to">
  <div class="btn-group">
    <a href=# class="btn btn-sec btn-sm btn-prev"><i class="sky-icon-prev"></i></a>
    <a href=# class="btn btn-sec btn-sm btn-next"><i class="sky-icon-next"></i></a>
  </div>
</div>
© 2024, PCCW Global