HTML Formatterhtmlformatteronline.com

Centered hero

Headline, sub, two buttons and a trust row. The default that earns its place.

herolandingcenteredcta
<section class="hero">
  <p class="eyebrow">Now in open beta</p>
  <h1>Put a static site online in the time it takes to make coffee</h1>
  <p class="lede">No build step, no framework to learn, no account until you want one.
  Drag a folder, get a URL.</p>

  <div class="actions">
    <a class="btn" href="/start/">Deploy a site</a>
    <a class="btn ghost" href="/docs/">Read the docs</a>
  </div>

  <p class="trust">Free for personal projects · No card required · 40 ms median response</p>
</section>

How it works

The centred hero is the default for a reason: it works with any headline length, needs no artwork, and puts the single most important sentence in the place people look first.

The headline is real text. Setting it as an image is still common and it costs you the search snippet, the ability to select and translate it, and any hope of it reflowing on a narrow screen.

clamp() with a rem in the middle term. clamp(2.1rem, 1.1rem + 3.6vw, 3.6rem) scales with the viewport but keeps a rem component, so a reader who has raised their browser font size still gets larger text. A pure vw value ignores that setting entirely, which is an accessibility failure people rarely notice because they never test it.

text-wrap: balance on the headline, pretty on the paragraph. balance evens out the line lengths of short text, which stops the classic five-words-then-one-word break. pretty only prevents orphans, which is the right treatment for a longer paragraph — balance is capped at a few lines and is expensive on long text.

A 52ch measure on the lede. Line length is the single biggest factor in whether a paragraph is comfortable to read. Around 50 to 75 characters is the range, and centred text wants the shorter end of it.

Two buttons, one of them quiet. If both calls to action look equally important, neither is. The ghost button is there for people who are not ready yet, and it should look like it.

Accessibility notes

One <h1>, and it is the actual headline rather than a logo or a tagline. Screen reader users jump by heading, and the <h1> is what tells them what the page is.

The eyebrow is a paragraph, not a heading. Marking it up as an <h2> above the <h1> — which happens a lot — breaks the document outline.

Both buttons are links, because they navigate. Use a <button> only when something happens on the same page.

Making it yours

The eyebrow is the first thing to cut. It is useful for a genuine status — beta, a launch date, a version — and it is filler for anything else.

Full-width buttons below 480 pixels is a deliberate choice: two side-by-side buttons on a phone give you two cramped tap targets instead of one comfortable one.

For a coloured background, the gradient generator will build one. Check the headline contrast at both ends of the gradient, not just the middle.

Related templates

Split hero with image

Text on one side, image on the other, stacking cleanly on mobile.

HTMLCSS

Gradient hero with search

A full-bleed gradient hero with a prominent search field.

HTMLCSS

Single-file landing page

A complete landing page in one file — hero, features, call to action.

HTMLCSS

Newsletter signup

An inline email capture with validation and a success state, in three layouts.

HTMLCSSJavaScript

Check your version

Once you have edited this, the HTML validator will catch any tag you left unclosed, and the formatter will tidy the indentation. Both run in your browser.

HTML Formatter HTML Beautifier HTML Pretty Printer JSON Formatter