最新
行动号召Centered CTA
A centred heading, sub-copy and a primary/secondary button pair - the default closing call-to-action.
#cta#centered#call-to-action
3 个框架初级
Loading…
A rounded CTA banner on a colour gradient, with a scrim that keeps the white text legible.
<!--
Two layers behind the text, both load-bearing: the gradient, then a flat
black/30 scrim. The scrim is not a mood filter - a gradient runs through light
and dark stops, so white text over the raw gradient clears contrast in one
region and fails in another. The scrim is what makes 4.5:1 true across it.
-->
<section class="relative isolate mx-auto w-full max-w-5xl overflow-hidden rounded-2xl">
<div class="absolute inset-0 -z-20 bg-gradient-to-r from-blue-600 via-indigo-600 to-purple-700" aria-hidden="true"></div>
<div class="absolute inset-0 -z-10 bg-black/30" aria-hidden="true"></div>
<div class="px-6 py-12 text-center sm:px-10 sm:py-16">
<h2 class="text-2xl font-bold tracking-tight text-white sm:text-4xl">
Everything your team needs, in one place
</h2>
<p class="mx-auto mt-4 max-w-xl text-base leading-relaxed text-gray-100">
Start free today. No credit card, no setup call, cancel whenever.
</p>
<div class="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
<a
href="#"
class="inline-flex w-full items-center justify-center rounded-lg bg-white px-5 py-2.5 text-sm font-semibold text-gray-900 transition-colors hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-gray-900 motion-reduce:transition-none sm:w-auto"
>
Start free trial
</a>
</div>
</div>
</section>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
title必填 | string | - | 卡片的标题文本。 |
copy | string | - | 显示在标题下方的正文文本。 |
ctaLabel | string | 'Start free trial' | 行动号召按钮的文案。 |
ctaHref | string | '#' | 行动号召链接的目标地址。 |
className | string | - | 合并到根元素上的额外类名。 |
The `bg-black/30` scrim is the component, not decoration: a gradient runs through light and dark stops, so white text over the raw gradient clears contrast in one region and fails in another - the scrim is what makes 4.5:1 true across it. The button ring is offset against `gray-900` because that is the darkest the banner ever gets.