Figma blog post page examples

The blog post page is the one page on a marketing site people genuinely read, top to bottom, sometimes for several minutes at a time. Everything else on the site is scanned.

That changes what the design is for: the job stops being persuasion and becomes not getting in the way, which is a harder brief than it sounds. Company blogs, changelog entries, engineering write ups and long form case studies all run through this template.

The measure is the design

Across these examples the article body sits in a 720px column inside a 1,216px content area. Sometimes it is centered, sometimes it is pushed left with a 384px sidebar holding a subscribe card. Either way the text column stays 720px, and that number is doing most of the work.

Baymard's summary of the research puts comfortable reading at roughly 50 to 75 characters per line, and WCAG 1.4.8 caps it at 80. A body column that stretches to the full 1,440px page fails both. If you take one thing from these files, take the column width and leave the rest.

Rich text built from components, not one text layer

The article body is not a single giant text box. It is a stack of content item instances, each sized to its own content and flowing in Auto Layout, so a subhead, a paragraph, a quote, a content divider and an image are separate blocks rather than sections of one long text layer.

A twelve block article and a fifteen block article use the same structure, so reordering a section is a drag rather than a retype, and the treatment of a quote or a caption gets decided once for every post instead of per article. It also keeps the vertical rhythm honest, since the spacing between blocks lives in the layout rather than in stray empty lines.

The mobile version uses the same blocks at 343px wide, so an article you restructure on desktop does not need rebuilding for the phone.

The parts around the article

The header does the framing. One pattern runs a badge group, a heading, and supporting text across 768px, then a 1,216px by 640px hero image with the author and publish date on the left and a share row of four buttons on the right. Another splits the viewport in half, 720px of image beside 720px of text with an avatar label group at the bottom.

Below the article, most examples close with related posts drawn from a blog section, a newsletter CTA, and a footer, which is the sequence that turns one read into a second one. The index pages these articles link back from live in the blog page examples, and the openers on their own are the blog post page headers.

Desktop, mobile, light, and dark

Each example ships as a 1,440px desktop page and a 375px mobile version, both in light and dark mode. On mobile the article runs the full 343px content column and the subscribe card that sat in the desktop sidebar drops below the last paragraph rather than disappearing, which is the right call, since a finished reader is the likeliest subscriber you will get.

Mobile is also where a long post admits its true length: several of these pages run past 7,000px. Reading in the dark version is worth checking rather than assuming, since long body copy at full contrast on a dark background is the fastest way to make an article tiring.

When the article template moves to code, Untitled UI React blog post pages are open source, built with Tailwind CSS, with the same measure, typography scale, and content blocks already set up.