Magazine Blog Grid
An editorial two-column layout with one large featured post and a divided stack of three secondary posts beside it.
An editorial two-column layout with one large featured post and a divided stack of three secondary posts beside it.
Search blocks by description or jump to a page.
The source for every Portfolio block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Magazine Blog Grid puts one large featured post on the left with a full cover Placeholder and an extended excerpt, The brief is the design: why I spend more time on the problem than the solution, beside a divided list of three smaller secondary posts on the right. Category, title, excerpt, date, and read time travel on every post object so the featured and secondary cards share one array. The asymmetric two-column layout is the distinctive detail: it signals a publication with an editorial point of view, not a reverse-chronological archive dump.
Posts are one typed array; the component splits on the featured flag, guarding with find and a fallback so noUncheckedIndexedAccess cannot throw. The lede, Notes on design practice and the decisions that do not fit inside a case study, frames the writing section as a complement to case studies, not a replacement.
Reach for this block as the writing or journal section of a portfolio homepage, or as the landing view of a standalone blog. The installer swaps the four post objects and the all-articles link for their own content, keeping at least one featured post with a full excerpt.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the editorial writing section. Other blog grid layouts:
Tip: the featured post earns its size from the excerpt length; a one-line excerpt in a large card wastes the column and the reader's attention.