Hero Sections
Centered Hero
A centred headline, sub-copy and a pair of CTAs under an eyebrow badge - the default landing hero.
#hero#centered#cta
6 frameworksBeginner
Loading…
Copy on the left, picture on the right, stacked in reading order on mobile.
<!--
Copy first in the DOM, image second. On mobile the columns stack in source
order, which is what you want: the headline should be the first thing read,
not a 300px picture the reader has to scroll past.
-->
<section class="hero-split">
<div class="hero-split__copy">
<p class="hero-split__kicker">Analytics</p>
<h1 class="hero-split__title">See what your customers actually do</h1>
<p class="hero-split__text">
Session-level insight without a tag manager, a data team, or a six-week
rollout.
</p>
<a class="hero-split__cta" href="#">Get started</a>
</div>
<div class="hero-split__media">
<!-- alt="" because the headline beside it already carries the meaning;
a description here would be read out twice. -->
<img class="hero-split__img" src="/images/dashboard.svg" alt="" width="560" height="420" />
</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. |
imageSrcrequired | string | - | Image URL for the card's picture. |
imageAlt | string | '' | Alternative text for the image. Empty when the title already names it. |
ctaLabel | string | 'Get started' | Call-to-action button text. |
ctaHref | string | '#' | Destination for the call-to-action link. |
Copy comes first in the DOM and the image second, so the mobile stack puts the headline above the picture without any `order-` gymnastics - the first thing read should not be a 300px image the visitor has to scroll past. The media box fixes a `4/3` aspect ratio so the column reserves its space before the image decodes; without it the copy jolts upward on load, which is the classic hero layout shift. `alt=""` is correct here: the headline beside it already carries the meaning, and describing it again just makes a screen reader say it twice. The Next.js tab uses `next/image` with `priority` because this picture is almost always the LCP element.