卡片
Pricing Card
A single pricing tier with a feature list, price and call to action.
#pricing#card#saas
6 个框架初级
Loading…
获取高级版A storefront card with a square image, price, star rating and an add-to-cart button.
<article class="product-card">
<img class="product-card__image" src="/your-image.jpg" alt="Aster wool throw in oat" width="320" height="320" />
<div class="product-card__body">
<h3 class="product-card__title">Aster Wool Throw</h3>
<p class="product-card__rating" role="img" aria-label="Rated 4.5 out of 5 from 128 reviews">
<svg class="product-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="product-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="product-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="product-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="product-card__star product-card__star--empty" 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>
<span class="product-card__reviews">(128)</span>
</p>
<div class="product-card__footer">
<p class="product-card__price">$128</p>
<button class="product-card__cta" type="button">Add to cart</button>
</div>
</div>
</article>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
title必填 | string | - | 卡片的标题文本。 |
price必填 | string | - | 要显示的金额。 |
imageSrc必填 | string | - | 卡片配图的图片 URL。 |
imageAlt必填 | string | - | 图片的替代文本。若 title 已说明图片内容则留空。 |
rating必填 | number | - | 0 到 5 的星级评分。 |
reviewCount必填 | number | - | 显示在评分旁边的评价数量。 |
ctaLabel | string | 'Add to cart' | 行动号召按钮的文案。 |
onAddToCart | () => void | - | 用户将商品加入购物车时触发。 |
className | string | - | 合并到根元素上的额外类名。 |
The five stars are one `role="img"` with a label reading "Rated 4.5 out of 5 from 128 reviews" - otherwise assistive tech announces five anonymous graphics and no number. Keep the exact rating in the label even though the stars round. `aspect-square` holds the grid steady while images load; change it to match your photography and every card in the row follows.