Pagination

Trongate CSS provides a sleek, user-friendly pagination system that ensures smooth navigation across multiple pages. By following the correct HTML structure, you can effortlessly implement consistent and visually appealing pagination components.

Basic Pagination

To create a basic pagination component, wrap your pagination links inside a container with the .pagination class:

<div class="pagination">
  <a href="#">«</a>
  <a href="#">1</a>
  <a href="#" class="active">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">»</a>
</div>

Showing Statement

Trongate CSS also provides a .tg-showing-statement class for displaying record count information, often used alongside pagination:

<p class="tg-showing-statement">Showing 1 - 10 of 47 results</p>

.tg-showing-statement {
    color: #666;
    margin-bottom: 1em;
}

Styling Highlights

• Rounded corners for the first and last links.
• Hover effects for interactive feedback.
• Active links are styled with the primary color for emphasis.
• Consistent spacing and clean borders.

Using Multiple Pagination Blocks

Place pagination components at the top and bottom of your content. The first pagination block includes a bottom margin for spacing, while subsequent blocks add a top margin for consistency:

<!-- Top pagination -->
<div class="pagination">
  <a href="#">«</a>
  <a href="#" class="active">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">»</a>
</div>

<!-- Content area -->
<div class="content">
  <!-- Your content here -->
</div>

<!-- Bottom pagination -->
<div class="pagination">
  <a href="#">«</a>
  <a href="#" class="active">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">»</a>
</div>

Extended Example

For pages with more content, you can extend the pagination component to include additional page numbers and states:

<div class="pagination">
  <a href="#">«</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#" class="active">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">7</a>
  <a href="#">»</a>
</div>