Blog card grids and the article page#
A blog needs two designs that agree with each other: the index somebody scans and the post they land on from search. These cover the index layouts a visitor scans before they choose anything.
The blog sections in this collection#
- Blog Section 1: a three-card layout with categories, titles and call-to-action links. Free.
- Blog Section 2: a grid of recent posts with images, titles, authors and tags.
- Blog Section 3: a horizontally scrollable stories row with gradient borders and avatars.
- Blog Section 4: a responsive news grid with images, titles and metadata.
Connecting a headless CMS#
Each card takes a post object with a title, an excerpt, an image, an author and tags, so mapping a response from Contentful, Sanity, WordPress or a folder of MDX is a transformation rather than a rewrite. Nothing in the card assumes where the data came from or what the fields are called upstream.
Posts without a cover image#
The image slot falls back to a neutral surface rather than stretching a placeholder photograph across the card. This matters more than it sounds on a blog index, where older posts almost always predate whatever image policy you have now, and a mixed feed of real photos and stock filler looks worse than a mixed feed of photos and plain surfaces.
What belongs on a blog card#
- The title, at a size that survives two lines without breaking the grid
- A category, which is the fastest filter a reader applies
- A date, unless the content is genuinely evergreen and you would rather not show one
- An author where the byline carries weight, and not where it does not
- An excerpt written for the card rather than the first sentence of the post truncated
A blog is not a changelog#
Release notes belong in a changelog, which is scanned for a version number, not read. A blog post explains one thing at length and is found through search. Publishing releases as blog posts buries the writing that brings people in, and publishing essays as changelog entries makes the changelog unusable for the support reply it exists to serve.
Where blog sections sit#
As the blog index itself, or as a three-card strip on a landing page showing recent writing. For records that are not articles, the listing cards are the right shape, and a newsletter call to action under the index is the highest-converting position on a content site.
