Figma marketing website content sections

Every website has pages nobody volunteers to design. The terms of service. The methodology note. The four paragraphs of context that legal insisted on. They get read anyway, usually by the person closest to signing something, and an unstyled wall of text on those pages costs you more than a mediocre hero ever will. These sections exist so that the boring pages come out of the same system as the interesting ones.

Content items, not text layers

Everything in the body is built from one Content item component with a Type property, so a paragraph and a pull quote are the same component wearing different clothes. Heading comes in xs, sm, md, lg, and xl. Paragraph comes in sm, md, lg, and xl. Then 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. Every one of them has a desktop version sized to a 720px column and a mobile version sized to 320px.

Because the spacing above and below each item lives inside the component, stacking instances in a zero-gap auto layout frame produces the same vertical rhythm every time, and nobody gets to invent a 27px gap at four in the afternoon.

Sizes in the file are visual, not semantic: a Heading at lg is not automatically an h2, and the W3C's headings tutorial is the reminder that ranks should nest properly in the markup regardless of what size you drew.

Ten layouts, from a paragraph to a whole page

Simple 01 to 05 are the short blocks, running from 844px down to a 454px section that is a heading, a paragraph, and nothing else. Split image 01 to 03 put a 576px column of content items beside a 576px image inside the 1,216px content area, with the heading, supporting text, and a button sitting above both.

Rich text 01 and 02 are the long ones: 01 stacks fifteen content items in a 720px column and runs 4,728px tall on desktop, 02 stops at 2,454px. Everything exists at 1,440px and 375px, in light and dark. The useful thing about having the 454px block and the 4,728px page in the same component is that a page can start as one and grow into the other without a redesign.

Getting the measure right

The rich text layouts centre their 720px column in a 1,216px area, leaving 248px empty on each side, and that emptiness is doing more work than anything else on the page. Long lines are tiring to read and readers respond by leaving rather than by telling you, which is the quiet failure mode Nielsen Norman Group covers in its guidance on legibility, readability, and comprehension, along with the more general point that scannable structure beats dense prose.

The Feature text and Quote items are the release valves: they break the column visually every screen or two without breaking the measure, which is why they are sized in the same scale as everything else rather than freehand.

Where these sections belong

Anywhere a page has more than three sentences in a row. An about page, a legal page, a careers page, the explanatory half of a landing page that has run out of feature grids. The same Content items build the article body in the blog post sections, which is the reason a long about page and a long blog post look like they came from the same company rather than two agencies.

If your section is really a heading plus a call to action, it is a CTA section and should be built as one; content sections are for informational pages where the words are the point. Figma's auto layout guide covers the resizing behavior that makes a column of items reflow cleanly when the copy grows, which it always does.

When it is time to build, Untitled UI React content and rich text sections are open source, built with Tailwind CSS and React Aria, and cover the same simple, split image, and rich text layouts in code.