कार्ड
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.