Figma marketing website blog sections

Most blog sections are not on the blog. They sit at the bottom of a product page or a landing page, three recent posts wide, doing a job the blog itself cannot: catching somebody who arrived for something else entirely and giving them a reason to stay another minute.

That is a different brief from the blog index, which has to cope with every article you will ever publish, and the two are separate components here for exactly that reason.

Section or page?

The Blog section component has eight types: Simple left aligned 01 and 02, Simple center aligned 01 and 02, Split layout 01 and 02, and Carousel layout 01 and 02. Each pairs a heading and supporting text with a handful of post cards and one route through to the index. Fixed count, one way out.

The Blog page header component is the index itself, and it has sixteen types: Simple 01 to 06, Featured post 01 to 04, Sidebar 01 and 02, and Alt layout 01 to 04.

If you are designing the page a visitor lands on when they click "View all", you want the header component and the blog page examples. If you are designing the thing they clicked, you want a section. The articles the cards point at are the blog post page examples.

What an index needs that a section does not

Sidebar 01 shows the difference plainly. A 280px sidebar carries a 44px search field and a set of vertical tabs for categories; the 872px content area holds eight post cards in two columns at 420px each; and a pagination row runs the full 1,216px width underneath.

None of that belongs in a three-card section, and all of it belongs on an index, because people arrive at a blog looking for one specific article rather than browsing for pleasure.

Nielsen Norman Group's guidance on infinite scrolling is worth reading before you replace that pagination with an endless feed: infinite scroll suits aimless browsing and actively hurts anyone trying to find or re-find something.

The post card is where the work happens

Blog post card is a component in its own right, with eight types across Simple 01 to 04 and Card full-width image 01 to 04, each in vertical and horizontal orientation, at desktop and mobile.

Vertical cards are 384px wide on desktop, horizontal ones 592px, and both drop to 360px on mobile. Simple 01 stacks a 384x256 image, a category line, the title with a trailing arrow-up-right icon, two lines of supporting text, and an avatar label group for the author. That last element earns its space: a face turns a link into an article somebody wrote.

Because it is one component, the same card drops into a carousel, an index grid, and a sidebar layout without anyone redrawing it, which is the whole argument for building the card before the section.

Carousels, and the subscribe card nobody asks for

Carousel layout 01 lines up nine cards in a 3,712px row inside a 1,280px container, with a pair of 56px arrows below and a View all button up in the heading row. To make that scroll in a prototype, turn on Clip content for the container and set horizontal scrolling on the frame inside it, per Figma's scroll and overflow documentation.

The fourth component is the Blog subscribe card, 384x404 on desktop in a default and a Line version, sized to sit in a sidebar or in place of a card in a grid.

Whether an email capture belongs in the middle of an index is a judgement call, and the honest answer is that it converts and it interrupts. If it is the main event rather than a garnish, use a newsletter CTA section instead and give it room.

When it is time to build, Untitled UI React blog sections are open source, built with Tailwind CSS and React Aria, and cover the same simple, featured post, sidebar, split, and carousel layouts with the responsive grids already written.