Cards
Pricing Card
A single pricing tier with a feature list, price and call to action.
#pricing#card#saas
6 frameworksBeginner
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 | Type | Default | Description |
|---|---|---|---|
titlerequired | string | - | Heading text for the card. |
pricerequired | string | - | Amount to display. |
imageSrcrequired | string | - | Image URL for the card's picture. |
imageAltrequired | string | - | Alternative text for the image. Empty when the title already names it. |
ratingrequired | number | - | Star rating from 0 to 5. |
reviewCountrequired | number | - | Number of reviews shown beside the rating. |
ctaLabel | string | 'Add to cart' | Call-to-action button text. |
onAddToCart | () => void | - | Fired when the user adds the product to the cart. |
className | string | - | Additional classes merged onto the root element. |
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.