Blog Grid Section
ID: blog-grid-v2
A responsive grid of blog post cards. Each card shows a cover image, category badge, title, excerpt, date, and read time. A "View All Posts" link appears in the header.
Live preview
Fields
| Field | Type | Label | Default |
|---|---|---|---|
headline | text | Headline | Latest from the Blog |
posts | array | Blog Posts | 3 default posts |
Post item fields
| Field | Type | Label | Default |
|---|---|---|---|
title | text | Title | Post Title |
excerpt | textarea | Excerpt | Post excerpt |
date | text | Date | Mar 1, 2026 |
category | text | Category | Product |
readTime | text | Read Time | 5 min |
image | image | Cover Image | -- |
Default content
Headline: Latest from the Blog
Posts: 3 blog cards with titles, excerpts, dates,
categories (Product, Engineering, Design),
and read times
Category badge colors
Category names are automatically color-coded:
| Category | Badge color |
|---|---|
| Product | Primary (blue) |
| Engineering | Secondary (gray) |
| Design | Success (green) |
| Other | Neutral |
When to use
Surface recent blog posts on your homepage or a dedicated blog page.
Tips
- Use 16:9 cover images for consistent card proportions.
- 3 or 6 posts fill the grid cleanly. Cards have a minimum width of 300px and wrap responsively.