Components / Editorial Hero
Editorial Hero
Kicker, display headline, lede, paired actions
Live preview — rendered in this site's theme
Editorial Hero
01 — New collection
Websites built by
agents, finished by hand.
A one-line promise that says what changes for the reader.
Usage
The editorial hero trades background imagery for typographic scale. Structure: mono kicker → display headline → one-sentence lede → two actions (one solid, one ghost).
Rules
- Headline set in the site's display face at
clamp(2.75rem, 7vw, 4.5rem), line-height ≤ 1.05.
- Exactly one italic/accent phrase per headline — it's the eye's landing point.
- The ghost button must stay visually quieter than primary; if both shout, neither converts.
- Kicker number ties into a page-wide numbering system when one exists.
Variations
- Centered ceremony: center everything, drop the lede to 40ch, add 2rem extra top padding.
- With meta line: add a mono row under CTAs (
EST. 2026 · EU-HOSTED · NO COOKIES) for trust signals.
HTML Copy-paste source
<section class="border-b border-base-content/10">
<div class="max-w-6xl mx-auto px-6 py-24 md:py-32">
<p class="font-mono text-xs uppercase tracking-[0.18em] text-base-content/60">
<span class="text-primary">01</span> — New collection
</p>
<h1 class="mt-4 text-5xl md:text-7xl leading-[1.02] tracking-tight font-medium" style="font-family: 'Fraunces', serif">
Websites built by<br><em class="italic text-secondary">agents</em>, finished by hand.
</h1>
<p class="mt-6 max-w-xl text-lg text-base-content/70">
A one-line promise that says what changes for the reader, not what the product is.
</p>
<div class="mt-10 flex flex-wrap gap-3">
<a href="#" class="btn btn-primary border-0">Start building</a>
<a href="#" class="btn btn-ghost border border-base-content/20">See examples</a>
</div>
</div>
</section>