精选
Hero 区块Split Image Hero
Copy on the left, picture on the right, stacked in reading order on mobile.
#hero#split#image
6 个框架初级
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 | 类型 | 默认值 | 说明 |
|---|---|---|---|
title必填 | string | - | 卡片的标题文本。 |
kicker | string | - | 显示在标题上方的小标签。 |
copy | string | - | 显示在标题下方的正文文本。 |
ctaLabel | string | 'Start free trial' | 行动号召按钮的文案。 |
ctaHref | string | '#' | 行动号召链接的目标地址。 |
className | string | - | 合并到根元素上的额外类名。 |
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.