Marketing landing page example

This page is the canonical answer to whether WebBlocks UI can support a calm, public-facing homepage using only shipped classes, patterns, and utilities.

Public pageHero composition includedNo custom CSS

Canonical use Use this example when you need a simple public homepage, want a copy-pasteable hero structure, or need to prove that WebBlocks UI can support calmer promotional composition without inventing new classes.

Open in Playground Read hero guidance

Canonical hero composition

Build public pages with explicit HTML, not hidden marketing wrappers.

WebBlocks UI gives you enough shipped structure for a clean landing page: a section wrapper, a constrained container, a strong heading, supporting copy, an action cluster, and optional proof or side content.

Start free See features

HTML-first
Zero framework lock-in
AI-friendly snippets

Readable structure

The landing page stays understandable from the HTML because the composition uses explicit shipped layout and surface classes.

Real shipped surfaces

Cards, promo blocks, callouts, buttons, and nav all come from the same package instead of a separate presentation layer.

AI-friendly validation

Generated snippets can be tested quickly in the Playground before they are copied into a real site or docs page.

Supporting value

What this landing page proves

Try these blocks in Playground

Calm hierarchy

Use larger rhythm, stronger headline contrast, and quieter support text than you would in an admin product shell.

CTA structure

Keep one primary action, one secondary action, and a short support row rather than stacking too many competing controls.

Proof blocks

Stats, inline proof chips, or compact supporting cards can reinforce the proposition without creating a fake dashboard.

Copy-pasteable markup

Each region can be copied as plain HTML and adapted quickly because no helper layer or custom class vocabulary is required.

Canonical hero composition

Default contract Use a section wrapper, a constrained inner grid, a copy stack with eyebrow, title, lead, action cluster, and optional support row, plus an optional side card for proof or product context.

When to use itUse this for public homepages, product intros, and calm promotional sections where message clarity matters more than dense controls.

Use these shipped classeswb-section or wb-section-sm, wb-page-intro, wb-page-intro-grid, wb-page-intro-copy, wb-page-eyebrow, wb-page-intro-title, wb-page-lead, wb-cluster, wb-inline-list, and optionally wb-page-intro-aside.

Do not do thisDo not invent a fake wb-hero wrapper, do not stack too many equal CTAs, and do not turn the hero into a metrics dashboard.

<section class="wb-page-intro wb-section-sm">
  <div class="wb-page-intro-grid">
    <div class="wb-page-intro-copy">
      <p class="wb-page-eyebrow">Canonical hero composition</p>
      <h1 class="wb-page-intro-title">Build public pages with explicit HTML.</h1>
      <p class="wb-page-lead">Use shipped layout, title, copy, and CTA rhythm instead of inventing a new hero class.</p>
      <div class="wb-cluster wb-cluster-2">
        <a href="#" class="wb-btn wb-btn-primary wb-btn-lg">Start free</a>
        <a href="#" class="wb-btn wb-btn-outline wb-btn-lg">See features</a>
      </div>
      <ul class="wb-inline-list">
        <li class="wb-inline-list-item">HTML-first</li>
        <li class="wb-inline-list-item">AI-friendly</li>
      </ul>
    </div>
    <aside class="wb-page-intro-aside">
      Optional proof, context, or media-adjacent support block.
    </aside>
  </div>
</section>

Open in Playground if you want to paste this hero structure directly, change the copy, and test the result with the real WebBlocks assets.

Build public pages with explicit HTML, not hidden marketing wrappers.

Readable structure

Real shipped surfaces

AI-friendly validation

What this landing page proves

Need to test your own public-page HTML next?

Canonical hero composition