卡片
Pricing Card
A single pricing tier with a feature list, price and call to action.
#pricing#card#saas
6 个框架初级
Loading…
A customer quote with a star rating, avatar, name and company.
<figure class="testimonial-card">
<p class="testimonial-card__rating" role="img" aria-label="Rated 5 out of 5">
<svg class="testimonial-card__star" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="m10 1.8 2.5 5 5.5.8-4 3.9.9 5.5-4.9-2.6L5.1 17l.9-5.5-4-3.9 5.5-.8L10 1.8Z" /></svg>
<svg class="testimonial-card__star" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="m10 1.8 2.5 5 5.5.8-4 3.9.9 5.5-4.9-2.6L5.1 17l.9-5.5-4-3.9 5.5-.8L10 1.8Z" /></svg>
<svg class="testimonial-card__star" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="m10 1.8 2.5 5 5.5.8-4 3.9.9 5.5-4.9-2.6L5.1 17l.9-5.5-4-3.9 5.5-.8L10 1.8Z" /></svg>
<svg class="testimonial-card__star" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="m10 1.8 2.5 5 5.5.8-4 3.9.9 5.5-4.9-2.6L5.1 17l.9-5.5-4-3.9 5.5-.8L10 1.8Z" /></svg>
<svg class="testimonial-card__star" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="m10 1.8 2.5 5 5.5.8-4 3.9.9 5.5-4.9-2.6L5.1 17l.9-5.5-4-3.9 5.5-.8L10 1.8Z" /></svg>
</p>
<blockquote class="testimonial-card__quote">
<p>“We shipped our billing rewrite two sprints early. The part I still can’t get over is that support tickets went down, not up.”</p>
</blockquote>
<figcaption class="testimonial-card__author">
<img class="testimonial-card__avatar" src="/your-image.jpg" alt="" width="40" height="40" />
<span>
<span class="testimonial-card__name">Marcus Lindqvist</span>
<span class="testimonial-card__company">VP Engineering, Northwind</span>
</span>
</figcaption>
</figure>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
quote必填 | string | - | 推荐语文本，不含首尾引号。 |
name必填 | string | - | 作为标题显示的人物姓名。 |
company必填 | string | - | 显示在姓名下方的公司。 |
avatarSrc必填 | string | - | 头像的图片 URL。 |
rating | number | 5 | 0 到 5 的星级评分。 |
className | string | - | 合并到根元素上的额外类名。 |
Built from `figure` / `blockquote` / `figcaption` so the attribution is bound to the quote rather than floating beside it. The card adds the quotation marks - pass `quote` clean, or your CMS ends up storing two of them. Drop `rating` to 0 and the stars grey out rather than disappearing, which keeps a row of cards aligned.