A typographic hero with no picture at all. A small label with a rule leads into a very large left-aligned headline. Under it, a short paragraph sits on the left and a single square-cornered button on the right. The section ends with four numbers in a row, each under a heavy top rule with a one-line caption. The look is flat and editorial: stone background, near-black type and one teal accent. On phones the headline drops to a size that still fills the width, the button moves under the paragraph and the numbers form a two-by-two grid.
const stats = [
{ value: "2,400+", label: "Roofs fitted across the county" },
{ value: "£840", label: "Average saving in the first year" },
{ value: "25 yrs", label: "Panel and workmanship warranty" },
{ value: "1 day", label: "Typical install, start to switch-on" },
];
export default function BigHeadlineHeroWithStatsRow() {
return (
<section className="bg-stone-100 px-6 py-16 text-stone-900 sm:py-24">
<div className="mx-auto max-w-6xl">
<p className="flex items-center gap-4 text-xs font-semibold uppercase tracking-widest text-teal-800 sm:text-sm">
<span aria-hidden="true" className="h-0.5 w-10 flex-none bg-teal-800" />
Sunward rooftop solar
</p>
<h1 className="mt-8 max-w-5xl text-5xl font-semibold leading-none tracking-tighter sm:text-7xl lg:text-8xl">
Lower bills start on your own roof.
</h1>
<div className="mt-10 flex flex-col gap-8 lg:flex-row lg:items-end lg:justify-between">
<p className="max-w-xl text-lg leading-relaxed text-stone-700 sm:text-xl">
We design, fit and look after solar panels and batteries for homes and small businesses. One survey, one fixed price, one team from start to finish.
</p>
<a href="#" className="group inline-flex flex-none items-center justify-between gap-6 bg-teal-800 px-7 py-4 text-base font-semibold text-white transition hover:bg-teal-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-teal-800 focus-visible:ring-offset-2 focus-visible:ring-offset-stone-100">
Book a free roof survey
<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" className="h-5 w-5 transition group-hover:translate-x-1"><path fillRule="evenodd" d="M3 10a.75.75 0 0 1 .75-.75h10.64l-3.2-3.2a.75.75 0 1 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 1 1-1.06-1.06l3.2-3.2H3.75A.75.75 0 0 1 3 10Z" clipRule="evenodd" /></svg>
</a>
</div>
<dl className="mt-16 grid grid-cols-2 gap-x-6 gap-y-8 sm:mt-20 sm:gap-x-10 lg:grid-cols-4">
{stats.map((s) => (
<div key={s.label} className="flex flex-col-reverse justify-end border-t-2 border-stone-900 pt-5">
<dt className="mt-2 text-sm leading-snug text-stone-700">{s.label}</dt>
<dd className="text-4xl font-semibold tracking-tighter tabular-nums sm:text-5xl">{s.value}</dd>
</div>
))}
</dl>
</div>
</section>
);
}
Install with one command: npx shadcn@latest add https://we.inc/r/big-headline-hero-with-stats-row.json
As big as fits in two or three lines at each screen size. Large type needs tight line height and slightly negative letter spacing, which is why this headline uses `leading-none` and `tracking-tighter`.
Ones that answer a buyer's doubts: how many customers you have, how long you have been trading, what people save and how long it takes. Use real figures you can back up, and keep each caption to a single short line.
Yes, when the words are strong. A text-only hero loads fast, works on every screen and avoids generic stock photos. It suits professional services, trades, finance and business software especially well.
You can place another link next to the first one, styled as plain underlined text so it does not compete. If both actions matter equally, a centred hero with two buttons is a better fit.
Keep the final values in the markup so they are readable without scripts, then add a small effect that counts from zero when the row scrolls into view. Skip the animation for visitors who have reduced motion turned on.
Related: Split Hero with Email Capture, Centered Hero with Two Buttons and Logo Row, Local Service Hero with Quote Request Form, Button Set: Primary, Secondary, Ghost, Icon and Loading.
More hero sections or all free UI components. Start for free to have a full site built around it.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.