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:

Styling Highlights

• Rounded corners for the first and last links.
• Hover effects for interactive feedback.
• Active links are styled with the primary colour 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:

Extended Example

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