Paginated list

A card grid that shows a collection three rows at a time, with previous / numbered / next links and a category badge picked by a case tag.

paginatepaginationlistcollectioncardsarticlesblogcase

About this block

Splits a collection into pages with the paginate tag. The links come from the default_pagination filter and keep every other address parameter, so a filter or search stays applied when the visitor moves to the next page.

How to customize it

  • Point collections.articles at your own collection, in both the paginate tag and the for loop, and change the number after by to the page size.
  • The page comes from the page parameter in the address, read as request.query.page. Nothing else is needed.
  • Edit the case tag to give each category its own pill colour; anything not listed falls into the else colour.

Browse other blocks

Same library cards — preview live and grab the code from any block.

View full library