Blog Card Grid
A paginated, tag-filterable grid of blog post cards with URL-driven state for seamless browsing.
Blog Card Grid
A paginated grid of blog post cards that supports tag-based filtering and URL-driven pagination. Content editors configure the page size and choose whether to display all posts or only those matching specific tags. The grid automatically fetches posts from the blog collection and renders them as responsive cards with pagination controls.
Adding in Strapi
- Go to Content Manager > Pages > select your page
- In the Design dynamic zone, click "Add component"
- Select "Dynamic" > "Blog Card Grid"
- Set the page size and tag mode, then optionally pick tags and configure the background
- Save and publish
Fields Reference
| Field | Type | Required | Description |
|---|---|---|---|
| pageSize | Integer | No | Number of blog cards to display per page. Min 3, max 30, defaults to 9. |
| tagMode | Enum | No | Tag filter mode: all (show every published post) or specific (filter by selected tags). Defaults to all. |
| tags | Relation | No | Specific blog tags to filter by. Only used when tagMode is specific. |
| background | Component | No | Background styling for the entire section (colour, gradient, or image). |
| entranceAnimation | Component | No | Scroll-triggered entrance animation (fade, slide-up, slide-left, slide-right, none). |
Variants
Default
A responsive card grid (1 column on mobile, 2 on tablet, 3 on desktop) with pagination at the bottom. Each card displays the post thumbnail, title, excerpt, and publish date. Pagination state is stored in the URL so users can share or bookmark a specific page.
EmptyState
Displays a friendly message when no blog posts match the current filters. This can happen when tagMode is set to specific but the selected tags have no published posts.
NullableFields
Demonstrates the grid with minimal configuration where optional fields are left empty, showing the component's default behaviour.
Tips
- Set
tagModetoallfor a general blog listing page, orspecificwhen embedding a topic-filtered grid on a product or category page. - Choose a
pageSizethat is a multiple of 3 (e.g. 9, 12) so the grid fills evenly on desktop. - When using
specifictag mode, ensure the selected tags have enough published posts to fill at least one page -- otherwise visitors will see the empty state. - The grid uses URL query parameters for pagination, so each page of results is bookmarkable and shareable.