卡片
Pricing Card
A single pricing tier with a feature list, price and call to action.
#pricing#card#saas
6 个框架初级
Loading…
A marketing feature tile with an icon, heading, copy and a "Learn more" link.
<article class="feature-card">
<span class="feature-card__tile" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M13 2 4.5 13.2a1 1 0 0 0 .8 1.6H10l-1 7.2 8.5-11.2a1 1 0 0 0-.8-1.6H12l1-7.2Z" />
</svg>
</span>
<h3 class="feature-card__title">Instant preview builds</h3>
<p class="feature-card__copy">
Every pull request gets its own URL in under thirty seconds, torn down the moment the branch merges.
</p>
<a class="feature-card__link" href="#">
Learn more
<svg class="feature-card__arrow" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M7.3 4.3a1 1 0 0 1 1.4 0l5 5a1 1 0 0 1 0 1.4l-5 5a1 1 0 0 1-1.4-1.4L11.6 10 7.3 5.7a1 1 0 0 1 0-1.4Z" />
</svg>
</a>
</article>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
title必填 | string | - | 卡片的标题文本。 |
copy必填 | string | - | 显示在标题下方的正文文本。 |
icon必填 | ReactNode | - | 与内容并排渲染的图标元素。 |
ctaLabel | string | 'Learn more' | 行动号召按钮的文案。 |
ctaHref | string | - | 行动号召链接的目标地址。 |
className | string | - | 合并到根元素上的额外类名。 |
Ten "Learn more" links in a feature grid are indistinguishable in a screen reader's link list, so the link carries an `sr-only` suffix naming the feature. The icon is passed in as a node rather than hard-coded, which keeps the card agnostic about your icon library. Drop `ctaHref` and the link disappears cleanly - useful when only some tiles have somewhere to go.