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:
By default, the previous and next links use « and ». You can replace these with icons or other symbols for custom designs.
We're continually improving the Trongate documentation. If anything is incorrect, unclear, incomplete, or could be better, we'd genuinely appreciate your input.
Share your thoughts in the Documentation Feedback.