Figma marketing website blog post sections

An article page has one job and roughly four decisions. How wide the text column runs, what sits above it, who gets named at the bottom, and where the reader goes next. Everything else is the writing, which is not a design problem.

These blog post page headers settle those decisions once, at 1,440px and 375px, and then get out of the way of the text.

The 720px column is the design

Every layout here runs its body in a 720px column inside a 1,216px content area, which leaves 248px of nothing on each side. That empty space is the single most important measurement on the page. A line of body copy stretched across a 1,440px viewport is exhausting to read, because the eye loses the start of the next line on every return sweep, and readers quietly leave rather than complain.

Nielsen Norman Group's guidance on legibility, readability, and comprehension is the background reading. The practical consequence in this file is that the column stays 720px no matter which opener you pick, so a big-image post and a plain one read identically below the fold.

Twelve openers, and what actually changes

The types are Large image 01 to 04, Split image 01 to 04, Alternative 01 to 03, and Simple. Large image 01 gives you a 1,132px header block before the article starts: the publish date on its own line, the title, a standfirst, three category badges, then a 1,216x640 image.

Simple throws all of that away and comes in at 2,834px total against 5,572px for Large image 01, which is the honest choice for a short post that does not have a hero image worth the download. The Split image and Alternative types redistribute the same ingredients, moving the image and the title into different relationships, which matters most when the opener has to fit above the fold. Whatever you pick, every type exists at desktop and mobile, in light and dark.

The byline and the share row

Each layout closes on an Author and social links row: a 256px avatar label group on the left, and on the right a labelled 119px button followed by three 40px icon buttons. Share, plus three networks. Three is the correct number, and the temptation to add a fourth should be resisted on the grounds that nobody has ever shared an article to their fifth-favourite platform.

The byline is less automatic than it looks. NN/g's piece on bylines for web articles argues you should name the author when their credentials support the piece and skip it when they do not, which is a better test than "always" or "never".

A real face at the bottom of a post is cheap credibility; a stock photo attached to "The Team" is worse than no photo at all. The free placeholder avatars are for the draft, not the launch.

The body is built from content items

The article body is a stack of Content item instances rather than a text layer with hand-tuned gaps. The types cover Heading at xs through xl, Paragraph at sm through xl, Quote left and Quote center at sm through 2xl, Image in 3:2 landscape, 1:1 square and 3:4 portrait, Divider at sm through 2xl, and Feature text at sm and md, each with its own desktop and mobile version. Large image 01 stacks thirteen of them.

Because spacing lives inside the item rather than between layers, a designer adding a pull quote halfway through cannot accidentally invent a new gap size, and the same items build the long-form blocks in the content sections.

For the cards and index grids that link into these pages, see blog sections, the blog index examples, and the full blog post page examples.

In code, Untitled UI React blog sections cover the index headers and post cards that feed these pages, open source and built with Tailwind CSS and React Aria.