Metrics Hero
A centered proof led hero with headline, lede, dual CTAs, a hairline separated row of three oversized stats, and a customer wordmark strip.
A centered proof led hero with headline, lede, dual CTAs, a hairline separated row of three oversized stats, and a customer wordmark strip.
Search blocks by description or jump to a page.
The source for every Marketing block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Metrics Hero opens the page with evidence instead of adjectives. A centered
headline, a one line lede, and a CTA pair sit at the top of the fold, then a
hairline separated row of three oversized stats carries the argument, and a
customer wordmark strip closes the foot. The section fills the viewport with
min-h-screen so the whole proof stack centres vertically with calm whitespace
around it.
The three pieces are independent: the stats live in a small typed array of value and label pairs, and each customer in the strip is a wordmark paired with its own inline SVG mark, so the block needs no external images and inverts cleanly between light and dark. Swap the numbers, relabel the CTAs, or replace the customer names without touching the layout.
Reach for this hero when your product already has numbers worth leading with: an uptime record, a usage figure, or a review score that does more selling than a screenshot would. It suits infrastructure, developer tools, and operations products where buyers are skeptical of promises and warm to measured results. Because the stats and wordmarks are built in, you can often skip a separate stats section or logo cloud directly beneath the fold.
A natural flow around it on a Marketing Pro page:
Before
After
The obvious fit is a reliability story backed by usage and ratings. A few other ways to use the frame:
Tip: keep each stat to one number and a short label. If a stat needs a sentence of context it belongs in a stats section further down the page, not in the hero.