Figma blog examples

A blog index is a routing page. Nobody arrives to read it, they arrive to pick something, and the pick happens in two or three glances at a headline, a category, and a thumbnail.

Company blogs, changelogs, newsrooms and resource libraries all land on this page, and they mostly fail the same way: forty cards of identical weight and nothing to look at first.

Card density is the real decision

The examples here take different positions on how much to show at once. One fills a 1,216px content area with two 592px cards per row, four rows deep, and closes with a pagination row. Another sets a 400px heading and button column beside a stack of two wider 752px cards, which reads as an edited highlight rather than an archive. Both work.

The mistake is drifting into one of them by accident. Nielsen Norman Group's definition of the card component is a useful check before you commit: cards suit browsing and mixed content types, while a dated list beats them when people are hunting for one specific post. Three hundred posts of the same kind do not need three hundred cards.

Column count is the second lever. A three column grid of 384px cards fits nine tiles above the pagination row, and one example spends a tile on a subscribe card instead of a tenth post, which is a better placement than the newsletter band everyone scrolls past at the bottom. That same layout puts a 168px sort select on the same line as the category tabs, so filtering and ordering share one row rather than competing for the top of the page.

Filters, pagination, and the parts around the grid

A blog index is mostly other components arranged well. Above the grid sits a 637px row of horizontal tabs acting as a category filter, and a full width pagination component sits under the last row of cards. Below that, most of these pages run a newsletter CTA section and a footer, and several add a second band of posts built from a blog section so recent and featured posts can be separated without a second template. Because the page is assembled from those pieces, swapping the two column grid for the highlight layout is a component swap, not a redesign.

The blog post card itself is a 320px image beside a 256px column holding a label line, a headline, two lines of supporting text, and an author avatar row, which is roughly as much as anyone reads before deciding. In the two column grid its height is pinned at 213px, so rows stay aligned when one headline runs long.

The pages behind the cards are the blog post page examples, built from the blog post page headers and content items.

Long pages, small screens, and prototyping the scroll

Every example exists as a 1,440px desktop page and a 375px mobile version, in light and dark mode. The mobile numbers are the ones worth looking at: a grid that fits comfortably on desktop becomes a scroll of roughly 4,000 to 6,700px on a phone, and a newsletter block placed after twelve stacked cards is a newsletter block almost nobody reaches.

When you prototype it, set the page frame to vertical overflow and mark the navigation as fixed so the header stays put while the cards move, which Figma's guide to scroll and overflow behavior covers in detail. Sticky is the other option, and it is the right one when the filter row should pin under the nav rather than scroll away.

When the design is settled, the same pages exist in code. Untitled UI React blog pages are open source, built with Tailwind CSS, assembled from the same sections, so the card grid you spaced in Figma is the card grid that ships.