कार्ड
Pricing Card
A single pricing tier with a feature list, price and call to action.
#pricing#card#saas
6 फ्रेमवर्कशुरुआती
Loading…
A photo card with a gradient scrim, text laid over it and a hover zoom.
<a class="overlay-card" href="#">
<img class="overlay-card__image" src="/your-image.jpg" alt="" width="384" height="288" />
<!-- The scrim is what makes white text legible over an unknown photo. -->
<span class="overlay-card__scrim" aria-hidden="true"></span>
<span class="overlay-card__content">
<span class="overlay-card__kicker">Field notes</span>
<span class="overlay-card__title">Three weeks above the tree line</span>
</span>
</a>| Prop | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
titleआवश्यक | string | - | कार्ड की हेडिंग टेक्स्ट। |
kicker | string | - | टाइटल के ऊपर दिखने वाला छोटा लेबल। |
hrefआवश्यक | string | - | कार्ड जिस जगह लिंक करता है। |
imageSrcआवश्यक | string | - | कार्ड की तस्वीर के लिए इमेज URL। |
imageAlt | string | '' | इमेज के लिए वैकल्पिक टेक्स्ट। जब title में पहले से नाम हो तो खाली रखें। |
className | string | - | रूट एलिमेंट पर मर्ज होने वाली अतिरिक्त क्लासेज़। |
The scrim is not decoration - it is the only thing guaranteeing white text stays readable over a photo you have not seen. Lightening `from-black/85` is the first thing that breaks contrast, so check it against your darkest and lightest images. The zoom lives on the image inside an `overflow-hidden` wrapper and is cancelled by `motion-reduce`; focus triggers the same zoom as hover, so keyboard users get the same affordance.