Hero 区块
Centered Hero
A centred headline, sub-copy and a pair of CTAs under an eyebrow badge - the default landing hero.
#hero#centered#cta
6 个框架初级
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 | 类型 | 默认值 | 说明 |
|---|---|---|---|
title必填 | string | - | 卡片的标题文本。 |
kicker | string | - | 显示在标题上方的小标签。 |
copy | string | - | 显示在标题下方的正文文本。 |
imageSrc必填 | string | - | 卡片配图的图片 URL。 |
imageAlt | string | '' | 图片的替代文本。若 title 已说明图片内容则留空。 |
ctaLabel | string | 'Get started' | 行动号召按钮的文案。 |
ctaHref | string | '#' | 行动号召链接的目标地址。 |
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.