कार्ड
Pricing Card
A single pricing tier with a feature list, price and call to action.
#pricing#card#saas
6 फ्रेमवर्कशुरुआती
Loading…
प्रीमियम एक्सेस लेंAn article card with a cover image, category chip, excerpt and author byline.
<article class="blog-card">
<img class="blog-card__cover" src="/your-image.jpg" alt="" width="384" height="200" />
<div class="blog-card__body">
<p class="blog-card__chip">Engineering</p>
<h3 class="blog-card__title">
<a class="blog-card__link" href="#">Why we rewrote our design tokens in one afternoon</a>
</h3>
<p class="blog-card__excerpt">
Four years of drift left us with 312 colours for what turned out to be nine decisions. Here is how we found them.
</p>
<div class="blog-card__meta">
<img class="blog-card__avatar" src="/your-image.jpg" alt="" width="28" height="28" />
<span class="blog-card__author">Priya Raman</span>
<span class="blog-card__dot" aria-hidden="true">·</span>
<time class="blog-card__date" datetime="2026-06-18">18 Jun 2026</time>
</div>
</div>
</article>| Prop | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
titleआवश्यक | string | - | कार्ड की हेडिंग टेक्स्ट। |
hrefआवश्यक | string | - | कार्ड जिस जगह लिंक करता है। |
excerptआवश्यक | string | - | टाइटल के नीचे दिखने वाला छोटा सारांश। |
categoryआवश्यक | string | - | टाइटल के ऊपर दिखने वाला कैटेगरी लेबल। |
coverSrcआवश्यक | string | - | कवर इमेज के लिए इमेज URL। |
authorNameआवश्यक | string | - | पोस्ट के लेखक का नाम। |
authorAvatarSrcआवश्यक | string | - | लेखक के अवतार के लिए इमेज URL। |
dateआवश्यक | string | - | मशीन-रीडेबल प्रकाशन तिथि। |
dateLabelआवश्यक | string | - | पढ़ने योग्य प्रकाशन तिथि। |
className | string | - | रूट एलिमेंट पर मर्ज होने वाली अतिरिक्त क्लासेज़। |
The title link stretches over the card with `after:absolute after:inset-0`, so the whole surface is clickable from a single real anchor - no nested links, and the announced name is the headline rather than "Read more". That trick needs a positioned ancestor: keep `relative` on the article. The `<time datetime>` is what feeds structured data, so give it the machine format and let the visible label be whatever reads well.