Chapter 03 / Landing page sections

The building blocks of a real website.

Headers, heroes, social proof, features, testimonials, pricing, FAQ, calls to action, contact and footers. Each section is one template that adapts to its brand and to the width it is given. Switch brand below to see the same structure dressed three ways, then build a page of your own at the end. All brands, names and reviews are made up.

Show as

Same sections, three brands. Only content and theme change.

Sections

Headers

The first thing on every page: who you are, where to go, and one clear action. Classic, centred around the logo, or with an announcement bar for news. On narrow screens the links step aside for the button.

  • Navigation
  • Primary action

Heroes

Six ways to open a page: split with a photo, centred statement, full-bleed image, product screenshot, editorial type and a hero with the sign-up form built in. Pick by what sells: the look, the product, the story or the next step.

  • First impression
  • Container queries

Social proof

A slow logo strip of press and partners, or four numbers that matter. It goes right under the hero, where visitors decide whether to keep reading.

  • Trust
  • Marquee

Features

An icon grid for many small reasons, alternating image rows for a few big ones, or a bento layout that mixes photo, facts and a number.

  • Benefits
  • Bento

Testimonials

One big quote when it is a great one, three cards when the variety is the point. A name and role make a quote believable.

  • Reviews

FAQ

Built on the native details element, so it works with the keyboard and without JavaScript. Answer the questions that stop people from buying.

  • details / summary

Pricing

Three tiers with the middle one highlighted, because most people pick the middle. Switch between monthly and yearly; the prices update in place.

  • Plans
  • Billing toggle

How it works

Four numbered steps that make the next move feel small. Good just before a call to action.

  • Steps

Calls to action

A bold colour band, a split with an image, or a newsletter sign-up for visitors who are not ready yet. Try submitting the form.

  • Conversion

Contact

Address, opening hours, a small drawn map and a short form. Three fields are enough; every extra field costs replies.

  • Form
  • Local business

Build a landing page

Put the sections together yourself: add, remove and reorder them, pick a style for each, switch brand, and check the result at desktop and phone width. The preview is the real thing, scaled down, so the pricing toggle, FAQ and forms all work.

  • Page builder
  • Responsive preview
Brand
Preview width
Sections, top to bottom
    Add a section