Hero

The opening section: it states the value proposition, backs it with proof, and shows the product. One hero per page.

Example

A composed hero: an .kicker eyebrow, a large headline, a lede, a button row, a row of statistics, and the product visual inside a .frame.

2026 Platform

The experimentation platform for teams that ship

Run server-side and client-side experiments on first-party data, without compromising privacy or speed.

Start 15-Day Free Trial Talk to sales

+38%Avg conversion lift

2.4MExperiments run

99.9%Uptime

app.convert.com

product screenshot

Composition

The hero is a composition of four components, stacked and centered:

Eyebrow, the .kicker label that frames the section above the headline.
Button, a primary plus secondary action in the CTA row.
Statistic, a row of figures that back the claim, with the gradient on one hero stat.
Frame, the browser chrome that holds the product visual.

Usage

The hero earns the visitor's attention in one screen. Keep it focused on the promise and the proof.

One hero per page: it's the single opening statement, never repeated.
Lead with the value proposition, not the feature list, say what the visitor gets.
Back the claim with 2-3 statistics, and reserve the gradient for one hero figure.
Put the product visual in a Frame so it reads as a real screen.
Keep the headline under ~8 words so it stays scannable.

Code

Link the component stylesheets, then compose the hero from the .kicker, button, .stat, and .frame classes.

<link rel="stylesheet" href="/_shared/components/buttons.css">
<link rel="stylesheet" href="/_shared/components/statistic.css">
<link rel="stylesheet" href="/_shared/components/frame.css">

<p class="kicker">2026 Platform</p>
<h1>The experimentation platform for teams that ship</h1>
<p>Run server-side and client-side experiments on first-party data.</p>

<div class="hero__actions">
  <a href="#" class="btn-primary">Start 15-Day Free Trial</a>
  <a href="#" class="btn-secondary">Talk to sales</a>
</div>

<div class="hero__stats">
  <div class="stat"><span class="stat__number">+38%</span><span class="stat__label">Avg conversion lift</span></div>
  <div class="stat"><span class="stat__number stat__number--gradient">2.4M</span><span class="stat__label">Experiments run</span></div>
  <div class="stat"><span class="stat__number">99.9%</span><span class="stat__label">Uptime</span></div>
</div>

<div class="frame">
  <div class="frame__bar"><span class="frame__dot"></span><span class="frame__dot"></span><span class="frame__dot"></span><span class="frame__url">app.convert.com</span></div>
  <div class="frame__body"><!-- product visual --></div>
</div>