Featured
Hero SectionsSplit Image Hero
Copy on the left, picture on the right, stacked in reading order on mobile.
#hero#split#image
6 frameworksBeginner
Loading…
A centred headline, sub-copy and a pair of CTAs under an eyebrow badge - the default landing hero.
<!--
The eyebrow is a <p>, not a heading. It reads as a label above the title, but
promoting it to <h2> would put a heading *before* the <h1> and break the
document outline for anyone navigating by headings.
-->
<section class="hero-centered">
<p class="hero-centered__kicker">
<span class="hero-centered__dot" aria-hidden="true"></span>
New - v2.0 is out
</p>
<h1 class="hero-centered__title">Ship your product, not your infrastructure</h1>
<p class="hero-centered__copy">
Everything you need to launch, measure and scale - in one place, with no
servers to babysit.
</p>
<div class="hero-centered__actions">
<a class="hero-centered__cta" href="#">Start free trial</a>
<a class="hero-centered__cta hero-centered__cta--secondary" href="#">Book a demo</a>
</div>
</section>| Prop | Type | Default | Description |
|---|---|---|---|
titlerequired | string | - | Heading text for the card. |
kicker | string | - | Small label shown above the title. |
copy | string | - | Body text shown under the title. |
ctaLabel | string | 'Start free trial' | Call-to-action button text. |
ctaHref | string | '#' | Destination for the call-to-action link. |
className | string | - | Additional classes merged onto the root element. |
The eyebrow is a `<p>`, not an `<h2>`, and that is deliberate: promoting it would put a heading *before* the `<h1>` and break the outline for anyone navigating by headings. The title uses `clamp()` in the CSS tab and a `sm:` step in the Tailwind tabs - either way it has to survive a 390px phone and a 1440px desktop with the same markup. The buttons go full width and stack below `sm`, because two 140px buttons side by side on a phone is two bad tap targets instead of one good one.