Section library

Each of the 12 sections in three placements: Left (text left, media right), Center (one centered column) and Right (text right, media left). One is marked Recommended, and the assembled page uses exactly those. How it is decided: short, punchy content reads best centered; long text and lists read best left; sections with photos alternate sides down the page (hero left, guide right, explanatory paragraph left); the hero puts text and CTA on the left where the eye lands first. Body text and lists stay left-aligned in every version: Left and Right move the block, not the text.

Tags show the HTML element each line uses on a real site: H1 = page title (one per page), H2 = section heading, H3 = sub-heading, P = paragraph text, IMG = image, A = link or button.

Hero note: every hero variant on this page uses a p badged P instead of an h1, so the page has one h1 (the title above).

02 Hero SB7: Character Required on Home
H1 with the keyword, H2 with the offer, H3 detail, main CTA plus transitional CTA, proof photo. Passes the 10-second Grunt Test.
Recommended: Left. The hero puts the text and CTA where the eye lands first, on the left at desktop widths, with the photo on the right.
Left Recommended Left: heading and CTAs on the left, photo on the right. On a phone, Left and Right look the same (one column). Note: here the H1 line is a p (badged P) so this page keeps one h1, its page title.

H1 line (a p here, see note): the keyword, who it is for

H2: the offer in one line

H3: one detail line that finishes the 10-second test

IMGProof photo (declared size) placeholder
Center Center: one centered column, heading and CTAs centered, photo below. Lists and long paragraphs stay left-aligned inside it. Note: here the H1 line is a p (badged P) so this page keeps one h1, its page title.

H1 line (a p here, see note): the keyword, who it is for

H2: the offer in one line

H3: one detail line that finishes the 10-second test

IMGProof photo (declared size) placeholder
Right Right: heading and CTAs on the right, photo on the left. On a phone, Left and Right look the same (one column). Note: here the H1 line is a p (badged P) so this page keeps one h1, its page title.

H1 line (a p here, see note): the keyword, who it is for

H2: the offer in one line

H3: one detail line that finishes the 10-second test

IMGProof photo (declared size) placeholder
03 Value stack SB7: Success Required on Home
The three quick wins the customer gets.
Recommended: Center. Short, punchy content (a heading and three one-line wins) reads best centered.
Left Left: heading on the left, three win cards on the right. On a phone, Left and Right look the same (one column).

Heading: the three quick wins

IMGIcon placeholder

Win 1

One line of subtext.

IMGIcon placeholder

Win 2

One line of subtext.

IMGIcon placeholder

Win 3

One line of subtext.

Center Recommended Center: one centered column, heading centered, three win cards below. Lists and long paragraphs stay left-aligned inside it.

Heading: the three quick wins

IMGIcon placeholder

Win 1

One line of subtext.

IMGIcon placeholder

Win 2

One line of subtext.

IMGIcon placeholder

Win 3

One line of subtext.

Right Right: heading on the right, three win cards on the left. On a phone, Left and Right look the same (one column).

Heading: the three quick wins

IMGIcon placeholder

Win 1

One line of subtext.

IMGIcon placeholder

Win 2

One line of subtext.

IMGIcon placeholder

Win 3

One line of subtext.

04 Stakes SB7: Problem Required on Home
What the customer wants, what stops them, the restated problem, one philosophical line.
Recommended: Left. It holds a list and several lines, and longer text and lists read best left-aligned.
Left Recommended Left: lead line, restated problem and CTAs on the left, list of what stops them on the right. On a phone, Left and Right look the same (one column).

Lead line: what the customer wants.

  • What stops them, item 1
  • What stops them, item 2
  • What stops them, item 3

The restated problem, in one sentence.

One philosophical line: it should not be this way.

Center Center: one centered column, lead line, restated problem and CTAs centered, list of what stops them below. Lists and long paragraphs stay left-aligned inside it.

Lead line: what the customer wants.

  • What stops them, item 1
  • What stops them, item 2
  • What stops them, item 3

The restated problem, in one sentence.

One philosophical line: it should not be this way.

Right Right: lead line, restated problem and CTAs on the right, list of what stops them on the left. On a phone, Left and Right look the same (one column).

Lead line: what the customer wants.

  • What stops them, item 1
  • What stops them, item 2
  • What stops them, item 3

The restated problem, in one sentence.

One philosophical line: it should not be this way.

05 Value proposition SB7: Guide Required on Home
The services or three benefits, one sentence each, link to the services page.
Recommended: Center. One heading, three one-sentence cards and one CTA is short content, so it reads best centered.
Left Left: heading, services link and CTAs on the left, service cards on the right. On a phone, Left and Right look the same (one column).

Heading: what we do for you

IMGIcon placeholder

Service 1

One sentence on the benefit.

IMGIcon placeholder

Service 2

One sentence on the benefit.

IMGIcon placeholder

Service 3

One sentence on the benefit.

Center Recommended Center: one centered column, heading, services link and CTAs centered, service cards below. Lists and long paragraphs stay left-aligned inside it.

Heading: what we do for you

IMGIcon placeholder

Service 1

One sentence on the benefit.

IMGIcon placeholder

Service 2

One sentence on the benefit.

IMGIcon placeholder

Service 3

One sentence on the benefit.

Right Right: heading, services link and CTAs on the right, service cards on the left. On a phone, Left and Right look the same (one column).

Heading: what we do for you

IMGIcon placeholder

Service 1

One sentence on the benefit.

IMGIcon placeholder

Service 2

One sentence on the benefit.

IMGIcon placeholder

Service 3

One sentence on the benefit.

06 Guide SB7: Guide Required on Home
Empathy statement, authority statement, testimonials with photos, client logos.
Recommended: Right. It has photos, so it takes the opposite side from the hero (testimonial photos on the left, text on the right), which starts the zig-zag.
Left Left: statements and CTAs on the left, testimonials and logos on the right. On a phone, Left and Right look the same (one column).

Heading: why you can trust us

Empathy: we understand what you are facing.

Authority: what we have done and for how long.

IMGClient photo placeholder

Testimonial quote, one or two lines.

IMGClient photo placeholder

Testimonial quote, one or two lines.

IMGClient logo placeholder
IMGClient logo placeholder
IMGClient logo placeholder
IMGClient logo placeholder
IMGClient logo placeholder
Center Center: one centered column, statements and CTAs centered, testimonials and logos below. Lists and long paragraphs stay left-aligned inside it.

Heading: why you can trust us

Empathy: we understand what you are facing.

Authority: what we have done and for how long.

IMGClient photo placeholder

Testimonial quote, one or two lines.

IMGClient photo placeholder

Testimonial quote, one or two lines.

IMGClient logo placeholder
IMGClient logo placeholder
IMGClient logo placeholder
IMGClient logo placeholder
IMGClient logo placeholder
Right Recommended Right: statements and CTAs on the right, testimonials and logos on the left. On a phone, Left and Right look the same (one column).

Heading: why you can trust us

Empathy: we understand what you are facing.

Authority: what we have done and for how long.

IMGClient photo placeholder

Testimonial quote, one or two lines.

IMGClient photo placeholder

Testimonial quote, one or two lines.

IMGClient logo placeholder
IMGClient logo placeholder
IMGClient logo placeholder
IMGClient logo placeholder
IMGClient logo placeholder
07 Plan SB7: Plan Required on Home
Three steps: step 1 is the CTA, step 2 what we do, step 3 the success.
Recommended: Center. Three short steps and one CTA read best centered in a row.
Left Left: heading on the left, three steps on the right. On a phone, Left and Right look the same (one column).

Heading: how it works in three steps

1
IMGIcon placeholder

Step 1: take the action

Short line on the first move.

2
IMGIcon placeholder

Step 2: what we do

Short line on our part of the work.

3
IMGIcon placeholder

Step 3: the success

Short line on the result they get.

Center Recommended Center: one centered column, heading centered, three steps below. Lists and long paragraphs stay left-aligned inside it.

Heading: how it works in three steps

1
IMGIcon placeholder

Step 1: take the action

Short line on the first move.

2
IMGIcon placeholder

Step 2: what we do

Short line on our part of the work.

3
IMGIcon placeholder

Step 3: the success

Short line on the result they get.

Right Right: heading on the right, three steps on the left. On a phone, Left and Right look the same (one column).

Heading: how it works in three steps

1
IMGIcon placeholder

Step 1: take the action

Short line on the first move.

2
IMGIcon placeholder

Step 2: what we do

Short line on our part of the work.

3
IMGIcon placeholder

Step 3: the success

Short line on the result they get.

08 Packages and pricing SB7: Plan Optional on Home
Package cards with price and a short description. Only when the site shows prices.
Recommended: Center. Three short cards and one CTA read best centered.
Left Left: heading and CTAs on the left, package cards on the right. On a phone, Left and Right look the same (one column).

Heading: choose a package

Package 1 name

Price (only when the site shows prices)

Short description of what is included.

Package 2 name

Price (only when the site shows prices)

Short description of what is included.

Package 3 name

Price (only when the site shows prices)

Short description of what is included.

Center Recommended Center: one centered column, heading and CTAs centered, package cards below. Lists and long paragraphs stay left-aligned inside it.

Heading: choose a package

Package 1 name

Price (only when the site shows prices)

Short description of what is included.

Package 2 name

Price (only when the site shows prices)

Short description of what is included.

Package 3 name

Price (only when the site shows prices)

Short description of what is included.

Right Right: heading and CTAs on the right, package cards on the left. On a phone, Left and Right look the same (one column).

Heading: choose a package

Package 1 name

Price (only when the site shows prices)

Short description of what is included.

Package 2 name

Price (only when the site shows prices)

Short description of what is included.

Package 3 name

Price (only when the site shows prices)

Short description of what is included.

09 Explanatory paragraph SB7: Guide Optional on Home
Logo, H2 summary, one-liner and a narrative in rich text for search.
Recommended: Left. Long narrative text reads best left, and the logo on the right keeps the zig-zag going after the Guide section (right, then left).
Left Recommended Left: heading and narrative on the left, logo on the right. On a phone, Left and Right look the same (one column).

H2: one-line summary of the company

One-liner: what we do and for whom.

Narrative (opens on tap)

Narrative placeholder: a few plain sentences about who the company is, what it does and where it works. This is the rich text that search engines read.

Narrative placeholder: a few plain sentences about who the company is, what it does and where it works. This is the rich text that search engines read.

Center Center: one centered column, heading and narrative centered, logo below. Lists and long paragraphs stay left-aligned inside it.

H2: one-line summary of the company

One-liner: what we do and for whom.

Narrative (opens on tap)

Narrative placeholder: a few plain sentences about who the company is, what it does and where it works. This is the rich text that search engines read.

Narrative placeholder: a few plain sentences about who the company is, what it does and where it works. This is the rich text that search engines read.

Right Right: heading and narrative on the right, logo on the left. On a phone, Left and Right look the same (one column).

H2: one-line summary of the company

One-liner: what we do and for whom.

Narrative (opens on tap)

Narrative placeholder: a few plain sentences about who the company is, what it does and where it works. This is the rich text that search engines read.

Narrative placeholder: a few plain sentences about who the company is, what it does and where it works. This is the rich text that search engines read.

10 Lead magnet SB7: CTA Optional on Home
A free resource in exchange for an email. Needs an approved pack change (the form pack fills only name and phone).
Recommended: Center. One title, one line, a short form and one button is short and punchy, so it reads best centered.
Left Left: offer title and line on the left, form on the right. On a phone, Left and Right look the same (one column).

Offer title: the free guide

One line on what the guide covers.

INPUT

Error message shows here

INPUT

Error message shows here

Center Recommended Center: one centered column, offer title and line centered, form below. Lists and long paragraphs stay left-aligned inside it.

Offer title: the free guide

One line on what the guide covers.

INPUT

Error message shows here

INPUT

Error message shows here

Right Right: offer title and line on the right, form on the left. On a phone, Left and Right look the same (one column).

Offer title: the free guide

One line on what the guide covers.

INPUT

Error message shows here

INPUT

Error message shows here

11 Failure reminder SB7: Failure Optional on Home
H2 on the cost of not acting plus the CTA. Last block before the footer.
Recommended: Center. One heading, one sentence and one CTA reads best centered.
Left Left: heading and sentence on the left, CTA button on the right. On a phone, Left and Right look the same (one column).

H2: what waiting costs the customer

One supporting sentence.

Center Recommended Center: one centered column, heading and sentence centered, CTA button below. Lists and long paragraphs stay left-aligned inside it.

H2: what waiting costs the customer

One supporting sentence.

Right Right: heading and sentence on the right, CTA button on the left. On a phone, Left and Right look the same (one column).

H2: what waiting costs the customer

One supporting sentence.