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