カード
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' | CTA ボタンのテキスト。 |
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.