Figma marketing website headers

The header section carries more weight than any other block on a marketing site and gets the least reading time. A visitor lands, forms an opinion, and either scrolls or leaves.

That happens on SaaS homepages, campaign landing pages, documentation sites, and app marketing pages, and the components above exist so the hour you would spend rebuilding the same three-part layout goes into the copy instead.

Headline, subhead, action, and something to look at

Aesthetic judgements land in roughly 50 milliseconds, which Nielsen Norman Group's work on automatic cognitive processing describes in detail, and attention stays clustered near the top of the page: their scrolling and attention research puts about 57% of viewing time above the fold.

So a hero gets four jobs and no more. The headline says what the product does in plain words. The subhead says who it is for or how it works. One primary action tells the visitor what to do next, with an optional secondary action for people who are not ready. The media shows the thing.

If the headline needs the subhead to make sense, the headline is not finished yet.

Choosing the media, or skipping it

The hero component carries its whole layout on a single Type property, and the options group by what they show: split image layouts, split forms for signup-first pages, browser screen mockups, iPhone mockups, card mockups, color cards, abstract angles, geometric shapes, and two simple text versions with no media at all. Every one is drawn at 1,440px desktop and 375px mobile.

The simple text versions are the underrated ones. A dense product screenshot turns to mush at hero size, and once nobody can read it, it is decoration; a well-set headline on clean space beats a screenshot rendered as texture.

The split form layouts are the other quiet workhorse, useful when the signup itself is the offer and a second click would only lose people.

The other header, the one with actions

The second component in this file is the compact page header, the band that sits under the nav on interior pages. It runs on three properties: alignment (center, left, or space between), the action slot (buttons, tabs, an email capture field, a search bar, or nothing at all), and color (default or brand).

The heights tell you what each choice costs. A left-aligned desktop header with no actions is 342px tall. Add a button pair and it becomes 438px. Add an email capture row and it is 464px. The space-between arrangement is the tightest at 300px, which is why it survives on pages that already have plenty to say, and the plain mobile version drops to 276px.

The tabs option matters more than it looks: putting the section nav inside the header keeps the page title and its sub-navigation in one block instead of two competing ones.

Sections compose into pages

These headers are the top of a stack. The landing page examples and pricing page examples are assembled from exactly these components plus features sections, metrics sections, and a closing CTA section, so swapping the hero on a finished page is a variant change rather than a redraw.

Every frame exists in a light and a dark version, and because the color property runs on styles rather than hand-picked fills, rebranding a header is a token change. Figma's modes for variables explain the plumbing if you want to wire your own themes into the same switch.

When it is time to build, the same headers exist in code. Untitled UI React header sections are open source, built with Tailwind CSS and React Aria, with the responsive stacking and the email capture form already wired up.